From 1712471167f792adfcfdbd78f5dc0948af3b7900 Mon Sep 17 00:00:00 2001
From: marcosrdz <marcospr@pm.me>
Date: Fri, 27 Nov 2020 22:24:20 -0500
Subject: [PATCH] WIP

---
 BlueComponents.js                             | 64 +++---------------
 Navigation.js                                 | 11 ++++
 .../lnd/lndViewAdditionalInvoicePreImage.js   | 65 +++++++++++++++++++
 screen/lnd/lndViewInvoice.js                  | 34 ++--------
 4 files changed, 90 insertions(+), 84 deletions(-)
 create mode 100644 screen/lnd/lndViewAdditionalInvoicePreImage.js

diff --git a/BlueComponents.js b/BlueComponents.js
index 9cc644048..a1ed44dca 100644
--- a/BlueComponents.js
+++ b/BlueComponents.js
@@ -944,11 +944,9 @@ export class BlueSpacing extends Component {
   }
 }
 
-export class BlueSpacing40 extends Component {
-  render() {
-    return <View {...this.props} style={{ height: 50 }} />;
-  }
-}
+export const BlueSpacing40 = props => {
+  return <View {...props} style={{ height: 50 }} />;
+};
 
 export class BlueSpacingVariable extends Component {
   render() {
@@ -966,17 +964,13 @@ export class is {
   }
 }
 
-export class BlueSpacing20 extends Component {
-  render() {
-    return <View {...this.props} style={{ height: 20, opacity: 0 }} />;
-  }
-}
+export const BlueSpacing20 = props => {
+  return <View {...props} style={{ height: 20, opacity: 0 }} />;
+};
 
-export class BlueSpacing10 extends Component {
-  render() {
-    return <View {...this.props} style={{ height: 10, opacity: 0 }} />;
-  }
-}
+export const BlueSpacing10 = props => {
+  return <View {...props} style={{ height: 10, opacity: 0 }} />;
+};
 
 export class BlueList extends Component {
   render() {
@@ -1514,46 +1508,6 @@ export class BlueSendButtonIcon extends Component {
   }
 }
 
-export class ManageFundsBigButton extends Component {
-  render() {
-    return (
-      <TouchableOpacity {...this.props}>
-        <View
-          style={{
-            flex: 1,
-            width: 168,
-            backgroundColor: BlueCurrentTheme.colors.buttonBackgroundColor,
-          }}
-        >
-          <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
-            <View
-              style={{
-                minWidth: 30,
-                minHeight: 30,
-                right: 5,
-                backgroundColor: 'transparent',
-                transform: [{ rotate: '90deg' }],
-              }}
-            >
-              <Icon {...this.props} name="link" size={16} type="font-awesome" color={BlueCurrentTheme.colors.buttonAlternativeTextColor} />
-            </View>
-            <Text
-              style={{
-                color: BlueCurrentTheme.colors.buttonAlternativeTextColor,
-                fontSize: (isIpad && 10) || 16,
-                fontWeight: '500',
-                backgroundColor: 'transparent',
-              }}
-            >
-              {loc.lnd.title}
-            </Text>
-          </View>
-        </View>
-      </TouchableOpacity>
-    );
-  }
-}
-
 export const BlueTransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUnit.BTC, timeElapsed }) => {
   const [subtitleNumberOfLines, setSubtitleNumberOfLines] = useState(1);
   const { colors } = useTheme();
diff --git a/Navigation.js b/Navigation.js
index 7ddf35df8..44e8d81bb 100644
--- a/Navigation.js
+++ b/Navigation.js
@@ -74,6 +74,7 @@ import UnlockWith from './UnlockWith';
 import DrawerList from './screen/wallets/drawerList';
 import { isTablet } from 'react-native-device-info';
 import SettingsPrivacy from './screen/settings/SettingsPrivacy';
+import LNDViewAdditionalInvoicePreImage from './screen/lnd/lndViewAdditionalInvoicePreImage';
 
 const defaultScreenOptions =
   Platform.OS === 'ios'
@@ -139,6 +140,11 @@ const WalletsRoot = () => (
       component={LNDViewAdditionalInvoiceInformation}
       options={LNDViewAdditionalInvoiceInformation.navigationOptions}
     />
+    <WalletsStack.Screen
+      name="LNDViewAdditionalInvoicePreImage"
+      component={LNDViewAdditionalInvoicePreImage}
+      options={LNDViewAdditionalInvoicePreImage.navigationOptions}
+    />
     <WalletsStack.Screen name="HodlHodlViewOffer" component={HodlHodlViewOffer} options={HodlHodlViewOffer.navigationOptions} />
     <WalletsStack.Screen name="Broadcast" component={Broadcast} options={Broadcast.navigationOptions} />
     <WalletsStack.Screen name="LnurlPay" component={LnurlPay} options={LnurlPay.navigationOptions} />
@@ -200,6 +206,11 @@ const LNDCreateInvoiceRoot = () => (
       component={LNDViewAdditionalInvoiceInformation}
       options={LNDViewAdditionalInvoiceInformation.navigationOptions}
     />
+    <LNDCreateInvoiceStack.Screen
+      name="LNDViewAdditionalInvoicePreImage"
+      component={LNDViewAdditionalInvoicePreImage}
+      options={LNDViewAdditionalInvoicePreImage.navigationOptions}
+    />
   </LNDCreateInvoiceStack.Navigator>
 );
 
diff --git a/screen/lnd/lndViewAdditionalInvoicePreImage.js b/screen/lnd/lndViewAdditionalInvoicePreImage.js
new file mode 100644
index 000000000..f6b33d10e
--- /dev/null
+++ b/screen/lnd/lndViewAdditionalInvoicePreImage.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { BlueCopyTextToClipboard, SafeBlueArea, BlueNavigationStyle, BlueSpacing20, BlueTextCentered } from '../../BlueComponents';
+import QRCode from 'react-native-qrcode-svg';
+import loc from '../../loc';
+import { useRoute, useTheme } from '@react-navigation/native';
+
+const LNDViewAdditionalInvoicePreImage = () => {
+  // state = { walletInfo: undefined };
+  const { colors } = useTheme();
+  const { preImageData } = useRoute().params;
+  const stylesHook = StyleSheet.create({
+    root: {
+      backgroundColor: colors.elevated,
+    },
+  });
+
+  return (
+    <SafeBlueArea style={[styles.root, stylesHook.root]}>
+      <View style={styles.wrapper}>
+        <BlueTextCentered>{loc.lndViewInvoice.preimage}:</BlueTextCentered>
+        <BlueSpacing20 />
+        <View style={styles.qrCodeContainer}>
+          <QRCode
+            value={preImageData}
+            logo={require('../../img/qr-code.png')}
+            size={300}
+            logoSize={90}
+            color="#000000"
+            logoBackgroundColor={colors.brandingColor}
+            backgroundColor="#FFFFFF"
+          />
+        </View>
+        <BlueSpacing20 />
+        <BlueCopyTextToClipboard text={preImageData} />
+      </View>
+    </SafeBlueArea>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  wrapper: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  qrCodeContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: 16,
+    borderWidth: 6,
+    borderRadius: 8,
+    borderColor: '#FFFFFF',
+  },
+});
+
+export default LNDViewAdditionalInvoicePreImage;
+
+LNDViewAdditionalInvoicePreImage.navigationOptions = () => ({
+  ...BlueNavigationStyle(),
+  title: loc.lndViewInvoice.additional_info,
+});
diff --git a/screen/lnd/lndViewInvoice.js b/screen/lnd/lndViewInvoice.js
index 7b188e963..1c1ab3980 100644
--- a/screen/lnd/lndViewInvoice.js
+++ b/screen/lnd/lndViewInvoice.js
@@ -30,7 +30,6 @@ const LNDViewInvoice = () => {
   const { goBack, navigate, setParams, setOptions } = useNavigation();
   const [isLoading, setIsLoading] = useState(typeof invoice === 'string');
   const [isFetchingInvoices, setIsFetchingInvoices] = useState(true);
-  const [showPreimageQr, setShowPreimageQr] = useState(false);
   const [invoiceStatusChanged, setInvoiceStatusChanged] = useState(false);
   const qrCodeHeight = height > width ? width - 20 : width / 2;
   const fetchInvoiceInterval = useRef();
@@ -147,8 +146,10 @@ const LNDViewInvoice = () => {
     return true;
   };
 
-  const setShowPreimageQrTrue = () => {
-    setShowPreimageQr(true);
+  const navigateToPreImageScreen = () => {
+    navigate('LNDViewAdditionalInvoicePreImage', {
+      preImageData: invoice.payment_preimage && typeof invoice.payment_preimage === 'string' ? invoice.payment_preimage : 'none',
+    });
   };
 
   const handleOnSharePressed = () => {
@@ -180,31 +181,6 @@ const LNDViewInvoice = () => {
       const currentDate = new Date();
       const now = (currentDate.getTime() / 1000) | 0;
       const invoiceExpiration = invoice.timestamp + invoice.expire_time;
-
-      if (showPreimageQr) {
-        return (
-          <View style={styles.root}>
-            <BlueText>{loc.lndViewInvoice.preimage}:</BlueText>
-            <BlueSpacing20 />
-            <View style={styles.qrCodeContainer}>
-              <QRCode
-                value={invoice.payment_preimage && typeof invoice.payment_preimage === 'string' ? invoice.payment_preimage : 'none'}
-                logo={require('../../img/qr-code.png')}
-                size={qrCodeHeight}
-                logoSize={90}
-                color="#000000"
-                logoBackgroundColor={colors.brandingColor}
-                backgroundColor="#FFFFFF"
-              />
-            </View>
-            <BlueSpacing20 />
-            <BlueCopyTextToClipboard
-              text={invoice.payment_preimage && typeof invoice.payment_preimage === 'string' ? invoice.payment_preimage : 'none'}
-            />
-          </View>
-        );
-      }
-
       if (invoice.ispaid || invoice.type === 'paid_invoice') {
         let amount = 0;
         if (invoice.type === 'paid_invoice' && invoice.value) {
@@ -226,7 +202,7 @@ const LNDViewInvoice = () => {
             />
             <View style={styles.detailsRoot}>
               {invoice.payment_preimage && typeof invoice.payment_preimage === 'string' ? (
-                <TouchableOpacity style={styles.detailsTouch} onPress={setShowPreimageQrTrue}>
+                <TouchableOpacity style={styles.detailsTouch} onPress={navigateToPreImageScreen}>
                   <Text style={[styles.detailsText, stylesHook.detailsText]}>{loc.send.create_details}</Text>
                   <Icon name="angle-right" size={18} type="font-awesome" color={colors.alternativeTextColor} />
                 </TouchableOpacity>