ADD: Show LNDHub backup when creating lnd wallet

MainBottomTabs.js

@@ -16,6 +16,7 @@ import WalletsList from './screen/wallets/list';
 import WalletTransactions from './screen/wallets/transactions';
 import AddWallet from './screen/wallets/add';
 import PleaseBackup from './screen/wallets/pleaseBackup';
+import PleaseBackupLNDHub from './screen/wallets/pleaseBackupLNDHub';
 import ImportWallet from './screen/wallets/import';
 import WalletDetails from './screen/wallets/details';
 import WalletExport from './screen/wallets/export';
@@ -210,6 +211,14 @@ const CreateWalletStackNavigator = createStackNavigator({
   PleaseBackup: {
     screen: PleaseBackup,
   },
+  PleaseBackupLNDHub: {
+    screen: PleaseBackupLNDHub,
+    swipeEnabled: false,
+    gesturesEnabled: false,
+    navigationOptions: {
+      header: null,
+    },
+  },
 });
 
 const LightningScanInvoiceStackNavigator = createStackNavigator({

screen/wallets/add.js

@@ -1,7 +1,6 @@
 /* global alert */
 import React, { Component } from 'react';
 import {
-  Alert,
   Text,
   ScrollView,
   LayoutAnimation,
@@ -269,34 +268,11 @@ export default class WalletsAdd extends Component {
                           EV(EV.enum.WALLETS_COUNT_CHANGED);
                           A(A.ENUM.CREATED_WALLET);
                           ReactNativeHapticFeedback.trigger('notificationSuccess', { ignoreAndroidSystemSettings: false });
-                          this.props.navigation.dismiss();
+                          this.props.navigation.navigate('PleaseBackupLNDHub', {
+                            wallet: w,
+                          });
                         };
-
-                        if (!BlueApp.getWallets().some(wallet => wallet.type !== LightningCustodianWallet.type)) {
-                          Alert.alert(
-                            loc.wallets.add.lightning,
-                            loc.wallets.createBitcoinWallet,
-                            [
-                              {
-                                text: loc.send.details.cancel,
-                                style: 'cancel',
-                                onPress: () => {
-                                  this.setState({ isLoading: false });
-                                },
-                              },
-                              {
-                                text: loc._.ok,
-                                style: 'default',
-                                onPress: () => {
-                                  this.createLightningWallet();
-                                },
-                              },
-                            ],
-                            { cancelable: false },
-                          );
-                        } else {
-                          this.createLightningWallet();
-                        }
+                        this.createLightningWallet();
                       } else if (this.state.selectedIndex === 2) {
                         // zero index radio - HD segwit
                         w = new HDSegwitP2SHWallet();

screen/wallets/pleaseBackupLNDHub.js

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { useNavigation, useNavigationParam } from 'react-navigation-hooks';
+import { View, Dimensions } from 'react-native';
+import { SafeBlueArea, BlueSpacing20, BlueCopyTextToClipboard, BlueButton, BlueCard, BlueTextCentered } from '../../BlueComponents';
+import QRCode from 'react-native-qrcode-svg';
+import { ScrollView } from 'react-native-gesture-handler';
+const { height, width } = Dimensions.get('window');
+const BlueApp = require('../../BlueApp');
+
+const PleaseBackupLNDHub = () => {
+  const wallet = useNavigationParam('wallet');
+  const navigation = useNavigation();
+  const [qrCodeHeight, setQrCodeHeight] = useState(height > width ? width - 40 : width / 2);
+
+  const onLayout = () => {
+    const { height } = Dimensions.get('window');
+    setQrCodeHeight(height > width ? width - 40 : width / 2);
+  };
+
+  return (
+    <SafeBlueArea style={{ flex: 1 }}>
+      <ScrollView centerContent contentContainerStyle={{ flexGrow: 1 }} onLayout={onLayout}>
+        <BlueCard>
+          <View>
+            <BlueTextCentered>
+              Please take a moment to save this LNDHub authentication. It's your backup you can use to restore the wallet on other device.
+            </BlueTextCentered>
+          </View>
+          <BlueSpacing20 />
+
+          <QRCode
+            value={wallet.secret}
+            logo={require('../../img/qr-code.png')}
+            logoSize={90}
+            size={qrCodeHeight}
+            color={BlueApp.settings.foregroundColor}
+            logoBackgroundColor={BlueApp.settings.brandingColor}
+            ecl={'H'}
+          />
+
+          <BlueSpacing20 />
+          <BlueCopyTextToClipboard text={wallet.secret} />
+          <BlueSpacing20 />
+          <BlueButton onPress={navigation.dismiss} title="OK, I have saved it." />
+        </BlueCard>
+      </ScrollView>
+    </SafeBlueArea>
+  );
+};
+
+export default PleaseBackupLNDHub;