ADD: view of QR code of Vault key zpub after vault is created (closes #2410)

screen/wallets/viewEditMultisigCosigners.js

@@ -31,7 +31,7 @@ import {
 } from '../../BlueComponents';
 import SquareEnumeratedWords, { SquareEnumeratedWordsContentAlign } from '../../components/SquareEnumeratedWords';
 import BottomModal from '../../components/BottomModal';
-import { HDSegwitBech32Wallet, MultisigHDWallet } from '../../class';
+import { HDSegwitBech32Wallet, MultisigCosigner, MultisigHDWallet } from '../../class';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import MultipleStepsListItem, {
@@ -40,6 +40,8 @@ import MultipleStepsListItem, {
 } from '../../components/MultipleStepsListItem';
 import Privacy from '../../Privacy';
 import Biometric from '../../class/biometrics';
+import QRCode from 'react-native-qrcode-svg';
+import { SquareButton } from '../../components/SquareButton';
 const fs = require('../../blue_modules/fs');
 const isDesktop = getSystemName() === 'Mac OS X';
 
@@ -51,13 +53,16 @@ const ViewEditMultisigCosigners = () => {
   const { walletId } = route.params;
   const w = useRef(wallets.find(wallet => wallet.getID() === walletId));
   const tempWallet = useRef(new MultisigHDWallet());
-  const [wallet, setWallet] = useState();
+  const [wallet: MultisigHDWallet, setWallet] = useState();
   const [isLoading, setIsLoading] = useState(true);
   const [isSaveButtonDisabled, setIsSaveButtonDisabled] = useState(true);
   const [currentlyEditingCosignerNum, setCurrentlyEditingCosignerNum] = useState(false);
   const [isProvideMnemonicsModalVisible, setIsProvideMnemonicsModalVisible] = useState(false);
   const [isMnemonicsModalVisible, setIsMnemonicsModalVisible] = useState(false);
+  const [isShareModalVisible, setIsShareModalVisible] = useState(false);
   const [importText, setImportText] = useState('');
+  const [exportString, setExportString] = useState('{}');
+  const [exportFilename, setExportFilename] = useState('bw-cosigner.json');
   const [vaultKeyData, setVaultKeyData] = useState({ keyIndex: 1, xpub: '', seed: '', path: '', fp: '', isLoading: false }); // string rendered in modal
   const data = useRef();
   const stylesHook = StyleSheet.create({
@@ -127,6 +132,12 @@ const ViewEditMultisigCosigners = () => {
     },
   });
 
+  const exportCosigner = () => {
+    setIsShareModalVisible(false);
+    setIsLoading(true);
+    fs.writeFileAndExport(exportFilename, exportString).finally(() => setIsLoading(false));
+  };
+
   const onSave = async () => {
     setIsLoading(true);
 
@@ -225,6 +236,16 @@ const ViewEditMultisigCosigners = () => {
             </>
           )}
           <BlueSpacing20 />
+          <BlueButton
+            title={loc.multisig.share}
+            onPress={() => {
+              setIsMnemonicsModalVisible(false);
+              setTimeout(() => {
+                setIsShareModalVisible(true);
+              }, 1000);
+            }}
+          />
+          <BlueSpacing20 />
           <BlueButton title={loc.send.success_done} onPress={() => setIsMnemonicsModalVisible(false)} />
           <BlueSpacing40 />
         </View>
@@ -263,14 +284,20 @@ const ViewEditMultisigCosigners = () => {
                   text: loc.multisig.view,
                   disabled: vaultKeyData.isLoading,
                   onPress: () => {
+                    const keyIndex = el.index + 1;
+                    const xpub = wallet.getCosigner(keyIndex);
+                    const fp = wallet.getFingerprint(keyIndex);
+                    const path = wallet.getCustomDerivationPathForCosigner(keyIndex);
                     setVaultKeyData({
-                      keyIndex: el.index + 1,
+                      keyIndex,
                       seed: '',
-                      xpub: wallet.getCosigner(el.index + 1),
+                      xpub,
-                      fp: wallet.getFingerprint(el.index + 1),
+                      fp,
-                      path: wallet.getCustomDerivationPathForCosigner(el.index + 1),
+                      path,
                       isLoading: false,
                     });
+                    setExportString(MultisigCosigner.exportToJson(fp, xpub, path));
+                    setExportFilename('bw-cosigner-' + fp + '.json');
                     setIsMnemonicsModalVisible(true);
                   },
                 }}
@@ -302,15 +329,22 @@ const ViewEditMultisigCosigners = () => {
                   disabled: vaultKeyData.isLoading,
                   buttonType: MultipleStepsListItemButtohType.partial,
                   onPress: () => {
+                    const keyIndex = el.index + 1;
+                    const seed = wallet.getCosigner(keyIndex);
                     setVaultKeyData({
-                      keyIndex: el.index + 1,
+                      keyIndex,
-                      seed: wallet.getCosigner(el.index + 1),
+                      seed,
                       xpub: '',
                       fp: '',
                       path: '',
                       isLoading: false,
                     });
                     setIsMnemonicsModalVisible(true);
+                    const fp = wallet.getFingerprint(keyIndex);
+                    const path = wallet.getCustomDerivationPathForCosigner(keyIndex);
+                    const xpub = wallet.convertXpubToMultisignatureXpub(MultisigHDWallet.seedToXpub(seed, path));
+                    setExportString(MultisigCosigner.exportToJson(fp, xpub, path));
+                    setExportFilename('bw-cosigner-' + fp + '.json');
                   },
                 }}
                 dashes={MultipleStepsListItemDashType.topAndBottom}
@@ -431,6 +465,10 @@ const ViewEditMultisigCosigners = () => {
     setImportText('');
   };
 
+  const hideShareModal = () => {
+    setIsShareModalVisible(false);
+  };
+
   const renderProvideMnemonicsModal = () => {
     return (
       <BottomModal isVisible={isProvideMnemonicsModalVisible} onClose={hideProvideMnemonicsModal}>
@@ -456,6 +494,32 @@ const ViewEditMultisigCosigners = () => {
     );
   };
 
+  const renderShareModal = () => {
+    return (
+      <BottomModal isVisible={isShareModalVisible} onClose={hideShareModal}>
+        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'position' : null}>
+          <View style={[styles.modalContent, stylesHook.modalContent, styles.alignItemsCenter]}>
+            <Text style={[styles.headerText, stylesHook.textDestination]}>{loc.multisig.this_is_cosigners_xpub}</Text>
+            <View style={styles.qrCodeContainer}>
+              <QRCode
+                value={exportString}
+                size={260}
+                color="#000000"
+                logoBackgroundColor={colors.brandingColor}
+                backgroundColor="#FFFFFF"
+                ecl="H"
+              />
+            </View>
+            <BlueSpacing20 />
+            <View style={styles.squareButtonWrapper}>
+              <SquareButton style={[styles.exportButton, stylesHook.exportButton]} onPress={exportCosigner} title={loc.multisig.share} />
+            </View>
+          </View>
+        </KeyboardAvoidingView>
+      </BottomModal>
+    );
+  };
+
   if (isLoading)
     return (
       <View style={[styles.root, stylesHook.root]}>
@@ -501,6 +565,8 @@ const ViewEditMultisigCosigners = () => {
 
       {renderProvideMnemonicsModal()}
 
+      {renderShareModal()}
+
       {renderMnemonicsModal()}
     </View>
   );
@@ -611,6 +677,7 @@ const styles = StyleSheet.create({
     position: 'relative',
     bottom: -3,
   },
+  qrCodeContainer: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
   tipLabelText: {
     fontWeight: '500',
   }