Revert "REF: Add Wallet Hooks (#1357)" (#1454)

This reverts commit 3e9c7aab77.

BlueComponents.js

@@ -92,43 +92,6 @@ export class BlueButton extends Component {
   }
 }
 
-export const BlueButtonHook = props => {
-  const { colors } = useTheme();
-  let backgroundColor = props.backgroundColor ? props.backgroundColor : colors.mainColor;
-  let fontColor = colors.buttonTextColor;
-  if (props.disabled === true) {
-    backgroundColor = colors.buttonDisabledBackgroundColor;
-    fontColor = colors.buttonDisabledTextColor;
-  }
-  let buttonWidth = props.width ? props.width : width / 1.5;
-  if ('noMinWidth' in props) {
-    buttonWidth = 0;
-  }
-  return (
-    <TouchableOpacity
-      style={{
-        flex: 1,
-        borderWidth: 0.7,
-        borderColor: 'transparent',
-        backgroundColor: backgroundColor,
-        minHeight: 45,
-        height: 45,
-        maxHeight: 45,
-        borderRadius: 25,
-        minWidth: buttonWidth,
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-      {...props}
-    >
-      <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
-        {props.icon && <Icon name={props.icon.name} type={props.icon.type} color={props.icon.color} />}
-        {props.title && <Text style={{ marginHorizontal: 8, fontSize: 16, color: fontColor }}>{props.title}</Text>}
-      </View>
-    </TouchableOpacity>
-  );
-};
-
 export class SecondButton extends Component {
   render() {
     let backgroundColor = this.props.backgroundColor ? this.props.backgroundColor : BlueCurrentTheme.colors.buttonBlueBackgroundColor;
@@ -167,61 +130,72 @@ export class SecondButton extends Component {
   }
 }
 
-export const BitcoinButton = props => {
+export class BitcoinButton extends Component {
-  const { colors } = useTheme();
+  render() {
-  return (
+    return (
-    <TouchableOpacity testID={props.testID} onPress={props.onPress}>
+      <TouchableOpacity
-      <View
+        testID={this.props.testID}
-        style={{
+        onPress={() => {
-          borderColor: colors.hdborderColor,
+          if (this.props.onPress) this.props.onPress();
-          borderWidth: 1,
-          borderRadius: 5,
-          backgroundColor: (props.active && colors.hdbackgroundColor) || colors.brandingColor,
-          minWidth: props.style.width,
-          minHeight: props.style.height,
-          height: props.style.height,
-          flex: 1,
         }}
       >
-        <View style={{ marginTop: 16, marginLeft: 16, marginBottom: 16 }}>
+        <View
-          <Text style={{ color: colors.hdborderColor, fontWeight: 'bold' }}>{loc.wallets.add_bitcoin}</Text>
+          style={{
+            borderColor: BlueCurrentTheme.colors.hdborderColor,
+            borderWidth: 1,
+            borderRadius: 5,
+            backgroundColor: (this.props.active && BlueCurrentTheme.colors.hdbackgroundColor) || BlueCurrentTheme.colors.brandingColor,
+            minWidth: this.props.style.width,
+            minHeight: this.props.style.height,
+            height: this.props.style.height,
+            flex: 1,
+          }}
+        >
+          <View style={{ marginTop: 16, marginLeft: 16, marginBottom: 16 }}>
+            <Text style={{ color: BlueCurrentTheme.colors.hdborderColor, fontWeight: 'bold' }}>{loc.wallets.add_bitcoin}</Text>
+          </View>
+          <Image
+            style={{ width: 34, height: 34, marginRight: 8, marginBottom: 8, justifyContent: 'flex-end', alignSelf: 'flex-end' }}
+            source={require('./img/addWallet/bitcoin.png')}
+          />
         </View>
-        <Image
+      </TouchableOpacity>
-          style={{ width: 34, height: 34, marginRight: 8, marginBottom: 8, justifyContent: 'flex-end', alignSelf: 'flex-end' }}
+    );
-          source={require('./img/addWallet/bitcoin.png')}
+  }
-        />
+}
-      </View>
-    </TouchableOpacity>
-  );
-};
 
-export const LightningButton = props => {
+export class LightningButton extends Component {
-  const { colors } = useTheme();
+  render() {
-  return (
+    return (
-    <TouchableOpacity onPress={props.onPress}>
+      <TouchableOpacity
-      <View
+        onPress={() => {
-        style={{
+          if (this.props.onPress) this.props.onPress();
-          borderColor: colors.lnborderColor,
-          borderWidth: 1,
-          borderRadius: 5,
-          backgroundColor: (props.active && colors.lnbackgroundColor) || colors.brandingColor,
-          minWidth: props.style.width,
-          minHeight: props.style.height,
-          height: props.style.height,
-          flex: 1,
         }}
       >
-        <View style={{ marginTop: 16, marginLeft: 16, marginBottom: 16 }}>
+        <View
-          <Text style={{ color: colors.lnborderColor, fontWeight: 'bold' }}>{loc.wallets.add_lightning}</Text>
+          style={{
+            borderColor: BlueCurrentTheme.colors.lnborderColor,
+            borderWidth: 1,
+            borderRadius: 5,
+            backgroundColor: (this.props.active && BlueCurrentTheme.colors.lnbackgroundColor) || BlueCurrentTheme.colors.brandingColor,
+            minWidth: this.props.style.width,
+            minHeight: this.props.style.height,
+            height: this.props.style.height,
+            flex: 1,
+          }}
+        >
+          <View style={{ marginTop: 16, marginLeft: 16, marginBottom: 16 }}>
+            <Text style={{ color: BlueCurrentTheme.colors.lnborderColor, fontWeight: 'bold' }}>{loc.wallets.add_lightning}</Text>
+          </View>
+          <Image
+            style={{ width: 34, height: 34, marginRight: 8, marginBottom: 8, justifyContent: 'flex-end', alignSelf: 'flex-end' }}
+            source={require('./img/addWallet/lightning.png')}
+          />
         </View>
-        <Image
+      </TouchableOpacity>
-          style={{ width: 34, height: 34, marginRight: 8, marginBottom: 8, justifyContent: 'flex-end', alignSelf: 'flex-end' }}
+    );
-          source={require('./img/addWallet/lightning.png')}
+  }
-        />
+}
-      </View>
-    </TouchableOpacity>
-  );
-};
 
 export class BlueWalletNavigationHeader extends Component {
   static propTypes = {
@@ -424,7 +398,7 @@ export class BlueWalletNavigationHeader extends Component {
   }
 }
 
-export const BlueButtonLinkHook = props => {
+export const BlueButtonLinkHook = ({ title, onPress }) => {
   const { colors } = useTheme();
   return (
     <TouchableOpacity
@@ -434,10 +408,9 @@ export const BlueButtonLinkHook = props => {
         height: 60,
         justifyContent: 'center',
       }}
-      onPress={props.onPress}
+      onPress={onPress}
-      {...props}
     >
-      <Text style={{ color: colors.foregroundColor, textAlign: 'center', fontSize: 16 }}>{props.title}</Text>
+      <Text style={{ color: colors.foregroundColor, textAlign: 'center', fontSize: 16 }}>{title}</Text>
     </TouchableOpacity>
   );
 };
@@ -683,11 +656,6 @@ export class BlueTextCentered extends Component {
   }
 }
 
-export const BlueTextCenteredHooks = props => {
-  const { colors } = useTheme();
-  return <Text {...props} style={{ color: colors.foregroundColor, textAlign: 'center' }} />;
-};
-
 export const BlueListItem = React.memo(props => (
   <ListItem
     testID={props.testID}
@@ -738,11 +706,11 @@ export const BlueListItemHooks = props => {
   );
 };
 
-export const BlueFormLabel = props => {
+export class BlueFormLabel extends Component {
-  const { colors } = useTheme();
+  render() {
-
+    return <Text {...this.props} style={{ color: BlueCurrentTheme.colors.foregroundColor, fontWeight: '400', marginLeft: 20 }} />;
-  return <Text {...props} style={{ color: colors.foregroundColor, fontWeight: '400', marginLeft: 20 }} />;
+  }
-};
+}
 
 export class BlueFormInput extends Component {
   render() {
@@ -1817,6 +1785,7 @@ const WalletCarouselItem = ({ item, index, onPress, handleLongPress }) => {
         onPress={() => {
           onPressedOut();
           onPress(index);
+          onPressedOut();
         }}
       />
     );

screen/wallets/add.js

@@ -1,8 +1,9 @@
 /* global alert */
-import React, { useState, useEffect } from 'react';
+import React, { Component } from 'react';
 import {
   Text,
   ScrollView,
+  LayoutAnimation,
   ActivityIndicator,
   Keyboard,
   KeyboardAvoidingView,
@@ -14,35 +15,40 @@ import {
 } from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
 import {
-  BlueTextCenteredHooks,
+  BlueTextCentered,
-  BlueTextHooks,
+  BlueText,
-  BlueListItemHooks,
+  BlueListItem,
   LightningButton,
   BitcoinButton,
   BlueFormLabel,
-  BlueButtonHook,
+  BlueButton,
   BlueNavigationStyle,
-  BlueButtonLinkHook,
+  BlueButtonLink,
   BlueSpacing20,
 } from '../../BlueComponents';
+import PropTypes from 'prop-types';
 import { HDSegwitBech32Wallet, SegwitP2SHWallet, HDSegwitP2SHWallet, LightningCustodianWallet, AppStorage } from '../../class';
+import { BlueCurrentTheme } from '../../components/themes';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import { Icon } from 'react-native-elements';
-import { useTheme, useNavigation } from '@react-navigation/native';
-import { Chain } from '../../models/bitcoinUnits';
 import loc from '../../loc';
 const EV = require('../../blue_modules/events');
 const A = require('../../blue_modules/analytics');
 const BlueApp: AppStorage = require('../../BlueApp');
+
 const styles = StyleSheet.create({
   loading: {
     flex: 1,
     paddingTop: 20,
+    backgroundColor: BlueCurrentTheme.colors.elevated,
   },
   label: {
     flexDirection: 'row',
+    borderColor: BlueCurrentTheme.colors.formBorder,
+    borderBottomColor: BlueCurrentTheme.colors.formBorder,
     borderWidth: 1,
     borderBottomWidth: 0.5,
+    backgroundColor: BlueCurrentTheme.colors.inputBackgroundColor,
     minHeight: 44,
     height: 44,
     marginHorizontal: 20,
@@ -80,12 +86,16 @@ const styles = StyleSheet.create({
     marginHorizontal: 20,
   },
   advancedText: {
+    color: BlueCurrentTheme.colors.feeText,
     fontWeight: '500',
   },
   lndUri: {
     flexDirection: 'row',
+    borderColor: BlueCurrentTheme.colors.formBorder,
+    borderBottomColor: BlueCurrentTheme.colors.formBorder,
     borderWidth: 1,
     borderBottomWidth: 0.5,
+    backgroundColor: BlueCurrentTheme.colors.inputBackgroundColor,
     minHeight: 44,
     height: 44,
     alignItems: 'center',
@@ -103,305 +113,334 @@ const styles = StyleSheet.create({
   },
   noPadding: {
     paddingHorizontal: 0,
+    backgroundColor: BlueCurrentTheme.colors.elevated,
+  },
+  root: {
+    backgroundColor: BlueCurrentTheme.colors.elevated,
   },
 });
 
-const WalletsAdd = () => {
+export default class WalletsAdd extends Component {
-  const { colors } = useTheme();
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true,
+      walletBaseURI: '',
+      selectedIndex: 0,
+    };
+  }
 
-  const [isLoading, setIsLoading] = useState(true);
+  async componentDidMount() {
-  const [walletBaseURI, setWalletBaseURI] = useState();
+    let walletBaseURI = await AsyncStorage.getItem(AppStorage.LNDHUB);
-  const [selectedIndex, setSelectedIndex] = useState(0);
+    const isAdvancedOptionsEnabled = await BlueApp.isAdancedModeEnabled();
-  const [label, setLabel] = useState('');
+    walletBaseURI = walletBaseURI || '';
-  const [isAdvancedOptionsEnabled, setIsAdvancedOptionsEnabled] = useState(false);
+    this.setState({
-  const [selectedWalletType, setSelectedWalletType] = useState(false);
+      isLoading: false,
-  const { navigate, goBack } = useNavigation();
+      activeBitcoin: undefined,
-  const [entropy, setEntropy] = useState();
+      label: '',
-  const [entropyButtonText, setEntropyButtonText] = useState(loc.wallets.add_entropy_provide);
+      isAdvancedOptionsEnabled,
-  const stylesHook = {
+      walletBaseURI,
-    advancedText: {
+    });
-      color: colors.feeText,
+  }
-    },
+
-    label: {
+  setLabel(text) {
-      borderColor: colors.formBorder,
+    this.setState({
-      borderBottomColor: colors.formBorder,
+      label: text,
-      backgroundColor: colors.inputBackgroundColor,
+    }); /* also, a hack to make screen update new typed text */
-    },
+  }
-    noPadding: {
+
-      backgroundColor: colors.elevated,
+  onSelect(index) {
-    },
+    this.setState({
-    root: {
+      selectedIndex: index,
-      backgroundColor: colors.elevated,
+    });
-    },
+  }
-    lndUri: {
+
-      borderColor: colors.formBorder,
+  showAdvancedOptions = () => {
-      borderBottomColor: colors.formBorder,
+    Keyboard.dismiss();
-      backgroundColor: colors.inputBackgroundColor,
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
-    },
+    this.setState({ isAdvancedOptionsEnabled: true });
   };
 
-  useEffect(() => {
+  render() {
-    AsyncStorage.getItem(AppStorage.LNDHUB)
+    if (this.state.isLoading) {
-      .then(setWalletBaseURI)
+      return (
-      .catch(() => setWalletBaseURI(''));
+        <View style={styles.loading}>
-    BlueApp.isAdancedModeEnabled()
+          <ActivityIndicator />
-      .then(setIsAdvancedOptionsEnabled)
+        </View>
-      .finally(() => setIsLoading(false));
+      );
-  }, [isAdvancedOptionsEnabled]);
+    }
 
-  const entropyGenerated = newEntropy => {
     let entropyTitle;
-    if (!newEntropy) {
+    if (!this.state.entropy) {
       entropyTitle = loc.wallets.add_entropy_provide;
-    } else if (newEntropy.length < 32) {
+    } else if (this.state.entropy.length < 32) {
       entropyTitle = loc.formatString(loc.wallets.add_entropy_remain, {
-        gen: newEntropy.length,
+        gen: this.state.entropy.length,
-        rem: 32 - newEntropy.length,
+        rem: 32 - this.state.entropy.length,
       });
     } else {
       entropyTitle = loc.formatString(loc.wallets.add_entropy_generated, {
-        gen: newEntropy.length,
+        gen: this.state.entropy.length,
       });
     }
-    setEntropy(newEntropy);
-    setEntropyButtonText(entropyTitle);
-  };
 
-  const createWallet = async () => {
+    return (
-    setIsLoading(true);
+      <ScrollView style={styles.root}>
-
+        <StatusBar barStyle="default" />
-    let w;
+        <BlueSpacing20 />
-
+        <KeyboardAvoidingView enabled behavior={Platform.OS === 'ios' ? 'padding' : null} keyboardVerticalOffset={62}>
-    if (selectedWalletType === Chain.OFFCHAIN) {
+          <BlueFormLabel>{loc.wallets.add_wallet_name}</BlueFormLabel>
-      createLightningWallet(w);
+          <View style={styles.label}>
-    } else if (selectedWalletType === Chain.ONCHAIN) {
+            <TextInput
-      if (selectedIndex === 2) {
+              testID="WalletNameInput"
-        // zero index radio - HD segwit
+              value={this.state.label}
-        w = new HDSegwitP2SHWallet();
+              placeholderTextColor="#81868e"
-        w.setLabel(label || loc.wallets.details.title);
+              placeholder="my first wallet"
-      } else if (selectedIndex === 1) {
+              onChangeText={text => {
-        // btc was selected
+                this.setLabel(text);
-        // index 1 radio - segwit single address
+              }}
-        w = new SegwitP2SHWallet();
+              style={styles.textInputCommon}
-        w.setLabel(label || loc.wallets.details.title);
+              editable={!this.state.isLoading}
-      } else {
+              underlineColorAndroid="transparent"
-        // btc was selected
+            />
-        // index 2 radio - hd bip84
-        w = new HDSegwitBech32Wallet();
-        w.setLabel(label || loc.wallets.details.title);
-      }
-      if (selectedWalletType === Chain.ONCHAIN) {
-        if (entropy) {
-          try {
-            await w.generateFromEntropy(entropy);
-          } catch (e) {
-            console.log(e.toString());
-            alert(e.toString());
-            goBack();
-            return;
-          }
-        } else {
-          await w.generate();
-        }
-        BlueApp.wallets.push(w);
-        await BlueApp.saveToDisk();
-        EV(EV.enum.WALLETS_COUNT_CHANGED);
-        A(A.ENUM.CREATED_WALLET);
-        ReactNativeHapticFeedback.trigger('notificationSuccess', { ignoreAndroidSystemSettings: false });
-        if (w.type === HDSegwitP2SHWallet.type || w.type === HDSegwitBech32Wallet.type) {
-          navigate('PleaseBackup', {
-            secret: w.getSecret(),
-          });
-        } else {
-          goBack();
-        }
-      }
-    }
-  };
-
-  const createLightningWallet = async wallet => {
-    wallet = new LightningCustodianWallet();
-    wallet.setLabel(label || loc.wallets.details.title);
-
-    try {
-      const lndhub = walletBaseURI && walletBaseURI.trim().length > 0 ? walletBaseURI : LightningCustodianWallet.defaultBaseUri;
-      if (lndhub) {
-        const isValidNodeAddress = await LightningCustodianWallet.isValidNodeAddress(lndhub);
-        if (isValidNodeAddress) {
-          wallet.setBaseURI(lndhub);
-          wallet.init();
-        } else {
-          throw new Error('The provided node address is not valid LNDHub node.');
-        }
-      }
-      await wallet.createAccount();
-      await wallet.authorize();
-    } catch (Err) {
-      setIsLoading(false);
-      console.warn('lnd create failure', Err);
-      return alert(Err);
-      // giving app, not adding anything
-    }
-    A(A.ENUM.CREATED_LIGHTNING_WALLET);
-    await wallet.generate();
-    BlueApp.wallets.push(wallet);
-    await BlueApp.saveToDisk();
-    EV(EV.enum.WALLETS_COUNT_CHANGED);
-    A(A.ENUM.CREATED_WALLET);
-    ReactNativeHapticFeedback.trigger('notificationSuccess', { ignoreAndroidSystemSettings: false });
-    navigate('PleaseBackupLNDHub', {
-      wallet,
-    });
-  };
-
-  const navigateToEntropy = () => {
-    navigate('ProvideEntropy', { onGenerated: entropyGenerated });
-  };
-
-  const navigateToImportWallet = () => {
-    navigate('ImportWallet');
-  };
-
-  const handleOnBitcoinButtonPressed = () => {
-    Keyboard.dismiss();
-    setSelectedWalletType(Chain.ONCHAIN);
-  };
-
-  const handleOnLightningButtonPressed = () => {
-    Keyboard.dismiss();
-    setSelectedWalletType(Chain.OFFCHAIN);
-  };
-
-  return (
-    <ScrollView style={stylesHook.root}>
-      <StatusBar barStyle="default" />
-      <BlueSpacing20 />
-      <KeyboardAvoidingView enabled behavior={Platform.OS === 'ios' ? 'padding' : null} keyboardVerticalOffset={62}>
-        <BlueFormLabel>{loc.wallets.add_wallet_name}</BlueFormLabel>
-        <View style={[styles.label, stylesHook.label]}>
-          <TextInput
-            testID="WalletNameInput"
-            value={label}
-            placeholderTextColor="#81868e"
-            placeholder="my first wallet"
-            onChangeText={setLabel}
-            style={styles.textInputCommon}
-            editable={!isLoading}
-            underlineColorAndroid="transparent"
-          />
-        </View>
-        <BlueFormLabel>{loc.wallets.add_wallet_type}</BlueFormLabel>
-
-        <View style={styles.buttons}>
-          <BitcoinButton
-            testID="ActivateBitcoinButton"
-            active={selectedWalletType === Chain.ONCHAIN}
-            onPress={handleOnBitcoinButtonPressed}
-            style={styles.button}
-          />
-          <View style={styles.or}>
-            <BlueTextCenteredHooks style={styles.orCenter}>{loc.wallets.add_or}</BlueTextCenteredHooks>
           </View>
-          <LightningButton active={selectedWalletType === Chain.OFFCHAIN} onPress={handleOnLightningButtonPressed} style={styles.button} />
+          <BlueFormLabel>{loc.wallets.add_wallet_type}</BlueFormLabel>
-        </View>
 
-        <View style={styles.advanced}>
+          <View style={styles.buttons}>
-          {(() => {
+            <BitcoinButton
-            if (selectedWalletType === Chain.ONCHAIN && isAdvancedOptionsEnabled) {
+              testID="ActivateBitcoinButton"
-              return (
+              active={this.state.activeBitcoin}
-                <View>
+              onPress={() => {
-                  <BlueSpacing20 />
+                Keyboard.dismiss();
-                  <Text style={[styles.advancedText, stylesHook.advancedText]}>{loc.settings.advanced_options}</Text>
+                this.setState({
-                  <BlueListItemHooks
+                  activeBitcoin: true,
-                    containerStyle={[styles.noPadding, stylesHook.noPadding]}
+                  activeLightning: false,
-                    bottomDivider={false}
+                });
-                    onPress={() => setSelectedIndex(0)}
+              }}
-                    title={HDSegwitBech32Wallet.typeReadable}
+              style={styles.button}
-                    {...(selectedIndex === 0
+            />
-                      ? {
+            <View style={styles.or}>
-                          rightIcon: <Icon name="check" type="octaicon" color="#0070FF" />,
+              <BlueTextCentered style={styles.orCenter}>{loc.wallets.add_or}</BlueTextCentered>
-                        }
+            </View>
-                      : { hideChevron: true })}
+            <LightningButton
-                  />
+              active={this.state.activeLightning}
-                  <BlueListItemHooks
+              onPress={() => {
-                    containerStyle={[styles.noPadding, stylesHook.noPadding]}
+                Keyboard.dismiss();
-                    bottomDivider={false}
+                this.setState({
-                    onPress={() => setSelectedIndex(1)}
+                  activeBitcoin: false,
-                    title={SegwitP2SHWallet.typeReadable}
+                  activeLightning: true,
-                    {...(selectedIndex === 1
+                });
-                      ? {
+              }}
-                          rightIcon: <Icon name="check" type="octaicon" color="#0070FF" />,
+              style={styles.button}
-                        }
+            />
-                      : { hideChevron: true })}
+          </View>
-                  />
+
-                  <BlueListItemHooks
+          <View style={styles.advanced}>
-                    containerStyle={[styles.noPadding, stylesHook.noPadding]}
+            {(() => {
-                    bottomDivider={false}
+              if (this.state.activeBitcoin && this.state.isAdvancedOptionsEnabled) {
-                    onPress={() => setSelectedIndex(2)}
+                return (
-                    title={HDSegwitP2SHWallet.typeReadable}
+                  <View>
-                    {...(selectedIndex === 2
+                    <BlueSpacing20 />
-                      ? {
+                    <Text style={styles.advancedText}>{loc.settings.advanced_options}</Text>
-                          rightIcon: <Icon name="check" type="octaicon" color="#0070FF" />,
+                    <BlueListItem
-                        }
+                      containerStyle={styles.noPadding}
-                      : { hideChevron: true })}
+                      bottomDivider={false}
-                  />
+                      onPress={() => {
-                </View>
+                        this.onSelect(0, HDSegwitBech32Wallet.type);
-              );
+                      }}
-            } else if (selectedWalletType === Chain.OFFCHAIN && isAdvancedOptionsEnabled) {
+                      title={HDSegwitBech32Wallet.typeReadable}
-              return (
+                      {...(this.state.selectedIndex === 0
-                <>
+                        ? {
-                  <BlueSpacing20 />
+                            rightIcon: <Icon name="check" type="octaicon" color="#0070FF" />,
-                  <Text style={styles.advancedText}>{loc.settings.advanced_options}</Text>
+                          }
-                  <BlueSpacing20 />
+                        : { hideChevron: true })}
-                  <BlueTextHooks>Connect to your LNDHub</BlueTextHooks>
+                    />
-                  <View style={[styles.lndUri, stylesHook.lndUri]}>
+                    <BlueListItem
-                    <TextInput
+                      containerStyle={styles.noPadding}
-                      value={walletBaseURI}
+                      bottomDivider={false}
-                      onChangeText={setWalletBaseURI}
+                      onPress={() => {
-                      onSubmitEditing={Keyboard.dismiss}
+                        this.onSelect(1, SegwitP2SHWallet.type);
-                      placeholder="your node address"
+                      }}
-                      clearButtonMode="while-editing"
+                      title={SegwitP2SHWallet.typeReadable}
-                      autoCapitalize="none"
+                      {...(this.state.selectedIndex === 1
-                      textContentType="URL"
+                        ? {
-                      autoCorrect={false}
+                            rightIcon: <Icon name="check" type="octaicon" color="#0070FF" />,
-                      placeholderTextColor="#81868e"
+                          }
-                      style={styles.textInputCommon}
+                        : { hideChevron: true })}
-                      editable={!isLoading}
+                    />
-                      underlineColorAndroid="transparent"
+                    <BlueListItem
+                      containerStyle={styles.noPadding}
+                      bottomDivider={false}
+                      onPress={() => {
+                        this.onSelect(2, HDSegwitP2SHWallet.typeReadable.type);
+                      }}
+                      title={HDSegwitP2SHWallet.typeReadable}
+                      {...(this.state.selectedIndex === 2
+                        ? {
+                            rightIcon: <Icon name="check" type="octaicon" color="#0070FF" />,
+                          }
+                        : { hideChevron: true })}
                     />
                   </View>
-                </>
+                );
-              );
+              } else if (this.state.activeLightning && this.state.isAdvancedOptionsEnabled) {
-            }
+                return (
-          })()}
+                  <>
-          <View style={styles.createButton}>
+                    <BlueSpacing20 />
-            {!isLoading ? (
+                    <Text style={styles.advancedText}>{loc.settings.advanced_options}</Text>
-              <BlueButtonHook testID="Create" title={loc.wallets.add_create} disabled={!selectedWalletType} onPress={createWallet} />
+                    <BlueSpacing20 />
-            ) : (
+                    <BlueText>{loc.wallets.add_lndhub}</BlueText>
-              <ActivityIndicator />
+                    <View style={styles.lndUri}>
-            )}
+                      <TextInput
-          </View>
+                        value={this.state.walletBaseURI}
-          {!isLoading && (
+                        onChangeText={text => this.setState({ walletBaseURI: text })}
-            <BlueButtonLinkHook
+                        onSubmitEditing={Keyboard.dismiss}
+                        placeholder={loc.wallets.add_lndhub_placeholder}
+                        clearButtonMode="while-editing"
+                        autoCapitalize="none"
+                        placeholderTextColor="#81868e"
+                        style={styles.textInputCommon}
+                        editable={!this.state.isLoading}
+                        underlineColorAndroid="transparent"
+                      />
+                    </View>
+                  </>
+                );
+              } else if (this.state.activeBitcoin === undefined && this.state.isAdvancedOptionsEnabled) {
+                return <View />;
+              }
+            })()}
+            <View style={styles.createButton}>
+              {!this.state.isLoading ? (
+                <BlueButton
+                  testID="Create"
+                  title={loc.wallets.add_create}
+                  disabled={this.state.activeBitcoin === undefined}
+                  onPress={() => {
+                    this.setState({ isLoading: true }, async () => {
+                      let w;
+
+                      if (this.state.activeLightning) {
+                        this.createLightningWallet = async () => {
+                          w = new LightningCustodianWallet();
+                          w.setLabel(this.state.label || loc.wallets.details_title);
+
+                          try {
+                            const lndhub =
+                              this.state.walletBaseURI.trim().length > 0
+                                ? this.state.walletBaseURI
+                                : LightningCustodianWallet.defaultBaseUri;
+                            if (lndhub) {
+                              const isValidNodeAddress = await LightningCustodianWallet.isValidNodeAddress(lndhub);
+                              if (isValidNodeAddress) {
+                                w.setBaseURI(lndhub);
+                                w.init();
+                              } else {
+                                throw new Error(loc.wallets.add_lndhub_error);
+                              }
+                            }
+
+                            await w.createAccount();
+                            await w.authorize();
+                          } catch (Err) {
+                            this.setState({ isLoading: false });
+                            console.warn('lnd create failure', Err);
+                            return alert(Err);
+                            // giving app, not adding anything
+                          }
+                          A(A.ENUM.CREATED_LIGHTNING_WALLET);
+                          await w.generate();
+                          BlueApp.wallets.push(w);
+                          await BlueApp.saveToDisk();
+                          EV(EV.enum.WALLETS_COUNT_CHANGED);
+                          A(A.ENUM.CREATED_WALLET);
+                          ReactNativeHapticFeedback.trigger('notificationSuccess', { ignoreAndroidSystemSettings: false });
+                          this.props.navigation.navigate('PleaseBackupLNDHub', {
+                            wallet: w,
+                          });
+                        };
+                        this.createLightningWallet();
+                      } else if (this.state.selectedIndex === 2) {
+                        // zero index radio - HD segwit
+                        w = new HDSegwitP2SHWallet();
+                        w.setLabel(this.state.label || loc.wallets.details_title);
+                      } else if (this.state.selectedIndex === 1) {
+                        // btc was selected
+                        // index 1 radio - segwit single address
+                        w = new SegwitP2SHWallet();
+                        w.setLabel(this.state.label || loc.wallets.details_title);
+                      } else {
+                        // btc was selected
+                        // index 2 radio - hd bip84
+                        w = new HDSegwitBech32Wallet();
+                        w.setLabel(this.state.label || loc.wallets.details_title);
+                      }
+                      if (this.state.activeBitcoin) {
+                        if (this.state.entropy) {
+                          try {
+                            await w.generateFromEntropy(this.state.entropy);
+                          } catch (e) {
+                            console.log(e.toString());
+                            alert(e.toString());
+                            this.props.navigation.goBack();
+                            return;
+                          }
+                        } else {
+                          await w.generate();
+                        }
+                        BlueApp.wallets.push(w);
+                        await BlueApp.saveToDisk();
+                        EV(EV.enum.WALLETS_COUNT_CHANGED);
+                        A(A.ENUM.CREATED_WALLET);
+                        ReactNativeHapticFeedback.trigger('notificationSuccess', { ignoreAndroidSystemSettings: false });
+                        if (w.type === HDSegwitP2SHWallet.type || w.type === HDSegwitBech32Wallet.type) {
+                          this.props.navigation.navigate('PleaseBackup', {
+                            secret: w.getSecret(),
+                          });
+                        } else {
+                          this.props.navigation.goBack();
+                        }
+                      }
+                    });
+                  }}
+                />
+              ) : (
+                <ActivityIndicator />
+              )}
+            </View>
+            <BlueButtonLink
               testID="ImportWallet"
               style={styles.import}
               title={loc.wallets.add_import_wallet}
-              onPress={navigateToImportWallet}
+              onPress={() => {
+                this.props.navigation.navigate('ImportWallet');
+              }}
             />
-          )}
+            {this.state.isAdvancedOptionsEnabled && (
-          {isAdvancedOptionsEnabled && !isLoading && (
+              <BlueButtonLink
-            <BlueButtonLinkHook style={styles.import} title={entropyButtonText} onPress={navigateToEntropy} />
+                style={styles.import}
-          )}
+                title={entropyTitle}
-        </View>
+                onPress={() => {
-      </KeyboardAvoidingView>
+                  this.props.navigation.navigate('ProvideEntropy', { onGenerated: entropy => this.setState({ entropy }) });
-    </ScrollView>
+                }}
-  );
+              />
-};
+            )}
+          </View>
+        </KeyboardAvoidingView>
+      </ScrollView>
+    );
+  }
+}
 
 WalletsAdd.navigationOptions = ({ navigation }) => ({
   ...BlueNavigationStyle(navigation, true),
-  headerTitle: loc.wallets.add_title,
+  title: loc.wallets.add_title,
   headerLeft: null,
 });
 
-export default WalletsAdd;
+WalletsAdd.propTypes = {
+  navigation: PropTypes.shape({
+    navigate: PropTypes.func,
+    goBack: PropTypes.func,
+  }),
+};