mirrors/BlueWallet
1
0
Fork 0
mirror of https://github.com/BlueWallet/BlueWallet.git synced 2025-02-23 15:20:55 +01:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3685 from BlueWallet/qrcomponent

Browse source 
REF: QRComponent
This commit is contained in:
GLaDOS 2021-08-28 07:09:37 +01:00 • committed by GitHub
commit 5b1665dc14
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 150 additions and 260 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
BlueComponents.js
View file

@ -26,12 +26,12 @@ import Clipboard from '@react-native-clipboard/clipboard';
import { BlurView } from '@react-native-community/blur';
import NetworkTransactionFees, { NetworkTransactionFee, NetworkTransactionFeeType } from './models/networkTransactionFees';
import { encodeUR } from './blue_modules/ur';
import QRCode from 'react-native-qrcode-svg';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useTheme } from '@react-navigation/native';
import { BlueCurrentTheme } from './components/themes';
import loc, { formatStringAddTwoWhiteSpaces } from './loc';
import { BlueStorageContext } from './blue_modules/storage-context';
import QRCodeComponent from './components/QRCodeComponent';
const { height, width } = Dimensions.get('window');
const aspectRatio = height / width;
@ -1281,14 +1281,7 @@ export class DynamicQRCode extends Component {
<View style={animatedQRCodeStyle.container}>
<BlueSpacing20 />
<View style={animatedQRCodeStyle.qrcodeContainer}>
<QRCode
value={currentFragment.toUpperCase()}
size={this.state.qrCodeHeight}
color="#000000"
logoBackgroundColor={BlueCurrentTheme.colors.brandingColor}
backgroundColor="#FFFFFF"
ecl="L"
/>
<QRCodeComponent value={currentFragment.toUpperCase()} size={this.state.qrCodeHeight} ecl="L" />
</View>
<BlueSpacing20 />
<View>
@ -1338,9 +1331,7 @@ const animatedQRCodeStyle = StyleSheet.create({
qrcodeContainer: {
alignItems: 'center',
justifyContent: 'center',
borderWidth: 6,
borderRadius: 8,
borderColor: '#FFFFFF',
margin: 6,
},
controller: {

13
components/DynamicQRCode.js
View file

@ -3,7 +3,7 @@ import React, { Component } from 'react';
import { Text } from 'react-native-elements';
import { Dimensions, LayoutAnimation, StyleSheet, TouchableOpacity, View } from 'react-native';
import { encodeUR } from '../blue_modules/ur';
import QRCode from 'react-native-qrcode-svg';
import QRCodeComponent from './QRCodeComponent';
import { BlueCurrentTheme } from '../components/themes';
import { BlueSpacing20 } from '../BlueComponents';
import loc from '../loc';
@ -114,12 +114,11 @@ export class DynamicQRCode extends Component {
>
{this.state.displayQRCode && (
<View style={animatedQRCodeStyle.qrcodeContainer}>
<QRCode
<QRCodeComponent
isLogoRendered={false}
value={currentFragment.toUpperCase()}
size={this.state.qrCodeHeight}
color="#000000"
logoBackgroundColor={BlueCurrentTheme.colors.brandingColor}
backgroundColor="#FFFFFF"
isMenuAvailable={false}
ecl="L"
onError={this.onError}
/>
@ -175,10 +174,6 @@ const animatedQRCodeStyle = StyleSheet.create({
qrcodeContainer: {
alignItems: 'center',
justifyContent: 'center',
borderWidth: 6,
borderRadius: 8,
borderColor: '#FFFFFF',
margin: 6,
},
controller: {
width: '90%',

94
components/QRCodeComponent.js Normal file
View file

@ -0,0 +1,94 @@
import React, { useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import { is } from '../BlueComponents';
import { useTheme } from './themes';
import ToolTipMenu from './TooltipMenu';
import Share from 'react-native-share';
import loc from '../loc';
import PropTypes from 'prop-types';
const QRCodeComponent = ({
value,
isLogoRendered = true,
isMenuAvailable = true,
logoSize = 90,
size = (is.ipad() && 300) || 300,
ecl = 'H',
onError = () => {},
}) => {
const qrCode = useRef();
const { colors } = useTheme();
const handleShareQRCode = () => {
qrCode.current.toDataURL(data => {
const shareImageBase64 = {
url: `data:image/png;base64,${data}`,
};
Share.open(shareImageBase64).catch(error => console.log(error));
});
};
const renderQRCode = (
<QRCode
value={value}
{...(isLogoRendered ? { logo: require('../img/qr-code.png') } : {})}
size={size}
logoSize={logoSize}
color="#000000"
logoBackgroundColor={colors.brandingColor}
backgroundColor="#FFFFFF"
ecl={ecl}
getRef={qrCode}
onError={onError}
/>
);
return (
<View style={styles.qrCodeContainer} testID="BitcoinAddressQRCodeContainer">
{isMenuAvailable ? (
<ToolTipMenu
actions={[
{
id: QRCodeComponent.actionKeys.Share,
text: loc.receive.details_share,
icon: QRCodeComponent.actionIcons.Share,
},
]}
onPress={handleShareQRCode}
>
{renderQRCode}
</ToolTipMenu>
) : (
renderQRCode
)}
</View>
);
};
export default QRCodeComponent;
const styles = StyleSheet.create({
qrCodeContainer: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
});
QRCodeComponent.actionKeys = {
Share: 'share',
};
QRCodeComponent.actionIcons = {
Share: {
iconType: 'SYSTEM',
iconValue: 'square.and.arrow.up',
},
};
QRCodeComponent.propTypes = {
value: PropTypes.string.isRequired,
isMenuAvailable: PropTypes.bool,
size: PropTypes.number,
ecl: PropTypes.string,
isLogoRendered: PropTypes.bool,
onError: PropTypes.func,
logoSize: PropTypes.number,
};

14
components/TooltipMenu.ios.js
View file

@ -1,6 +1,7 @@
import React from 'react';
import { ContextMenuView, ContextMenuButton } from 'react-native-ios-context-menu';
import PropTypes from 'prop-types';
import QRCodeComponent from './QRCodeComponent';
const ToolTipMenu = props => {
const menuItems = props.actions.map(action => {
@ -23,6 +24,8 @@ const ToolTipMenu = props => {
const submenu = props.submenu;
const isButton = !!props.isButton;
const isMenuPrimaryAction = props.isMenuPrimaryAction ? props.isMenuPrimaryAction : false;
const previewQRCode = props.previewQRCode ?? false;
const previewValue = props.previewValue;
return isButton ? (
<ContextMenuButton
onPressMenuItem={({ nativeEvent }) => {
@ -45,6 +48,15 @@ const ToolTipMenu = props => {
menuTitle,
menuItems: menuItems.concat(submenu),
}}
{...(previewQRCode
? {
previewConfig: {
previewType: 'CUSTOM',
backgroundColor: 'white',
},
renderPreview: () => <QRCodeComponent value={previewValue} isMenuAvailable={false} />,
}
: {})}
>
{props.children}
</ContextMenuView>
@ -60,4 +72,6 @@ ToolTipMenu.propTypes = {
onPress: PropTypes.func.isRequired,
isMenuPrimaryAction: PropTypes.bool,
isButton: PropTypes.bool,
previewQRCode: PropTypes.bool,
previewValue: PropTypes.string,
};

4
components/TransactionListItem.js
View file

@ -285,7 +285,7 @@ export const TransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUn
{
id: TransactionListItem.actionKeys.CopyBlockExplorerLink,
text: `${loc.transactions.details_copy} ${loc.transactions.block_explorer_link}`,
icon: TransactionListItem.actionIcons.Link,
icon: TransactionListItem.actionIcons.Clipboard,
},
);
}
@ -359,7 +359,7 @@ TransactionListItem.actionIcons = {
},
Clipboard: {
iconType: 'SYSTEM',
iconValue: 'arrow.right.doc.on.clipboard',
iconValue: 'doc.on.doc',
},
Link: {
iconType: 'SYSTEM',

2
components/TransactionsNavigationHeader.js
View file

@ -37,7 +37,7 @@ export default class TransactionsNavigationHeader extends Component {
},
Clipboard: {
iconType: 'SYSTEM',
iconValue: 'arrow.right.doc.on.clipboard',
iconValue: 'doc.on.doc',
},
};

4
components/addresses/AddressItem.js
View file

@ -102,7 +102,7 @@ const AddressItem = ({ item, balanceUnit, walletID, allowSignVerifyMessage }) =>
const render = () => {
return (
<TooltipMenu actions={getAvailableActions()} onPress={onToolTipPress}>
<TooltipMenu title={item.address} actions={getAvailableActions()} onPress={onToolTipPress} previewQRCode previewValue={item.address}>
<ListItem key={`${item.key}`} button onPress={navigateToReceive} containerStyle={stylesHook.container}>
<ListItem.Content style={stylesHook.list}>
<ListItem.Title style={stylesHook.list} numberOfLines={1} ellipsizeMode="middle">
@ -144,7 +144,7 @@ AddressItem.actionIcons = {
},
Clipboard: {
iconType: 'SYSTEM',
iconValue: 'arrow.right.doc.on.clipboard',
iconValue: 'doc.on.doc',
},
};

16
screen/lnd/lndViewAdditionalInvoiceInformation.js
View file

@ -1,13 +1,13 @@
/* global alert */
import React, { useContext, useEffect, useState } from 'react';
import { View, Share, StyleSheet } from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
import { BlueButton, BlueCopyTextToClipboard, BlueLoading, BlueSpacing20, BlueText, SafeBlueArea } from '../../BlueComponents';
import navigationStyle from '../../components/navigationStyle';
import loc from '../../loc';
import { BlueStorageContext } from '../../blue_modules/storage-context';
import QRCodeComponent from '../../components/QRCodeComponent';
const LNDViewAdditionalInvoiceInformation = () => {
const { walletID } = useRoute().params;
@ -54,15 +54,7 @@ const LNDViewAdditionalInvoiceInformation = () => {
<SafeBlueArea style={stylesHook.root}>
<View style={styles.wrapper}>
<View style={styles.qrcode}>
<QRCode
value={walletInfo.uris[0]}
logo={require('../../img/qr-code.png')}
size={300}
logoSize={90}
color="#000000"
logoBackgroundColor={colors.brandingColor}
backgroundColor="#FFFFFF"
/>
<QRCodeComponent value={walletInfo.uris[0]} size={300} />
</View>
<BlueSpacing20 />
<BlueText>{loc.lndViewInvoice.open_direct_channel}</BlueText>
@ -100,10 +92,6 @@ const styles = StyleSheet.create({
qrcode: {
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 16,
borderWidth: 6,
borderRadius: 8,
borderColor: '#FFFFFF',
},
share: {
marginBottom: 25,

15
screen/lnd/lndViewAdditionalInvoicePreImage.js
View file

@ -1,11 +1,11 @@
import React from 'react';
import { View, StyleSheet } from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import { useRoute, useTheme } from '@react-navigation/native';
import { BlueCopyTextToClipboard, SafeBlueArea, BlueSpacing20, BlueTextCentered } from '../../BlueComponents';
import navigationStyle from '../../components/navigationStyle';
import loc from '../../loc';
import QRCodeComponent from '../../components/QRCodeComponent';
const LNDViewAdditionalInvoicePreImage = () => {
// state = { walletInfo: undefined };
@ -23,15 +23,7 @@ const LNDViewAdditionalInvoicePreImage = () => {
<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"
/>
<QRCodeComponent value={preImageData} size={300} logoSize={90} />
</View>
<BlueSpacing20 />
<BlueCopyTextToClipboard text={preImageData} />
@ -50,9 +42,6 @@ const styles = StyleSheet.create({
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 16,
borderWidth: 6,
borderRadius: 8,
borderColor: '#FFFFFF',
},
});

50
screen/lnd/lndViewInvoice.js
View file

@ -3,7 +3,7 @@ import { View, Text, StatusBar, ScrollView, BackHandler, TouchableOpacity, Style
import Share from 'react-native-share';
import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
import { Icon } from 'react-native-elements';
import QRCode from 'react-native-qrcode-svg';
import QRCodeComponent from '../../components/QRCodeComponent';
import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
import {
@ -20,7 +20,6 @@ import loc from '../../loc';
import { BlueStorageContext } from '../../blue_modules/storage-context';
import { BitcoinUnit } from '../../models/bitcoinUnits';
import { SuccessView } from '../send/success';
import ToolTipMenu from '../../components/TooltipMenu';
const LNDViewInvoice = () => {
const { invoice, walletID, isModal } = useRoute().params;
@ -33,7 +32,6 @@ const LNDViewInvoice = () => {
const [invoiceStatusChanged, setInvoiceStatusChanged] = useState(false);
const [qrCodeSize, setQRCodeSize] = useState(90);
const fetchInvoiceInterval = useRef();
const qrCode = useRef();
const stylesHook = StyleSheet.create({
root: {
backgroundColor: colors.background,
@ -169,15 +167,6 @@ const LNDViewInvoice = () => {
navigate('LNDViewAdditionalInvoiceInformation', { walletID });
};
const handleShareQRCode = () => {
qrCode.current.toDataURL(data => {
const shareImageBase64 = {
url: `data:image/png;base64,${data}`,
};
Share.open(shareImageBase64).catch(error => console.log(error));
});
};
useEffect(() => {
if (invoice.ispaid && invoiceStatusChanged) {
ReactNativeHapticFeedback.trigger('notificationSuccess', { ignoreAndroidSystemSettings: false });
@ -254,27 +243,7 @@ const LNDViewInvoice = () => {
<ScrollView>
<View style={[styles.activeRoot, stylesHook.root]}>
<View style={styles.activeQrcode}>
<ToolTipMenu
actions={[
{
id: LNDViewInvoice.actionKeys.Share,
text: loc.receive.details_share,
icon: LNDViewInvoice.actionIcons.Share,
},
]}
onPress={handleShareQRCode}
>
<QRCode
value={invoice.payment_request}
logo={require('../../img/qr-code.png')}
size={qrCodeSize}
logoSize={90}
color="#000000"
logoBackgroundColor={colors.brandingColor}
backgroundColor="#FFFFFF"
getRef={qrCode}
/>
</ToolTipMenu>
<QRCodeComponent value={invoice.payment_request} size={qrCodeSize} />
</View>
<BlueSpacing20 />
<BlueText>
@ -309,17 +278,6 @@ const LNDViewInvoice = () => {
);
};
LNDViewInvoice.actionKeys = {
Share: 'share',
};
LNDViewInvoice.actionIcons = {
Share: {
iconType: 'SYSTEM',
iconValue: 'square.and.arrow.up',
},
};
const styles = StyleSheet.create({
root: {
flex: 1,
@ -328,7 +286,6 @@ const styles = StyleSheet.create({
justifyContentCenter: {
justifyContent: 'center',
},
qrCodeContainer: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
valueAmount: {
flexDirection: 'row',
justifyContent: 'center',
@ -392,9 +349,6 @@ const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
marginHorizontal: 16,
borderWidth: 6,
borderRadius: 8,
borderColor: '#FFFFFF',
},
});

54
screen/receive/details.js
View file

@ -1,4 +1,4 @@
import React, { useCallback, useContext, useRef, useState } from 'react';
import React, { useCallback, useContext, useState } from 'react';
import {
InteractionManager,
Keyboard,
@ -10,7 +10,7 @@ import {
TextInput,
View,
} from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import QRCodeComponent from '../../components/QRCodeComponent';
import { useNavigation, useRoute, useTheme, useFocusEffect } from '@react-navigation/native';
import Share from 'react-native-share';
@ -19,7 +19,6 @@ import {
BlueCopyTextToClipboard,
BlueButton,
BlueButtonLink,
is,
BlueText,
BlueSpacing20,
BlueAlertWalletExportReminder,
@ -35,7 +34,6 @@ import DeeplinkSchemaMatch from '../../class/deeplink-schema-match';
import loc from '../../loc';
import { BlueStorageContext } from '../../blue_modules/storage-context';
import Notifications from '../../blue_modules/notifications';
import ToolTipMenu from '../../components/TooltipMenu';
const currency = require('../../blue_modules/currency');
const ReceiveDetails = () => {
@ -51,7 +49,6 @@ const ReceiveDetails = () => {
const [showAddress, setShowAddress] = useState(false);
const { navigate, goBack, setParams } = useNavigation();
const { colors } = useTheme();
const qrCode = useRef();
const styles = StyleSheet.create({
modalContent: {
backgroundColor: colors.modal,
@ -85,7 +82,6 @@ const ReceiveDetails = () => {
color: colors.foregroundColor,
minHeight: 33,
},
qrCodeContainer: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
root: {
flexGrow: 1,
backgroundColor: colors.elevated,
@ -135,15 +131,6 @@ const ReceiveDetails = () => {
},
});
const handleShareQRCode = () => {
qrCode.current.toDataURL(data => {
const shareImageBase64 = {
url: `data:image/png;base64,${data}`,
};
Share.open(shareImageBase64).catch(error => console.log(error));
});
};
const renderReceiveDetails = () => {
return (
<ScrollView contentContainerStyle={styles.root} keyboardShouldPersistTaps="always">
@ -158,30 +145,8 @@ const ReceiveDetails = () => {
</BlueText>
</>
)}
<View style={styles.qrCodeContainer} testID="BitcoinAddressQRCodeContainer">
<ToolTipMenu
actions={[
{
id: ReceiveDetails.actionKeys.Share,
text: loc.receive.details_share,
icon: ReceiveDetails.actionIcons.Share,
},
]}
onPress={handleShareQRCode}
>
<QRCode
value={bip21encoded}
logo={require('../../img/qr-code.png')}
size={(is.ipad() && 300) || 300}
logoSize={90}
color="#000000"
logoBackgroundColor={colors.brandingColor}
backgroundColor="#FFFFFF"
ecl="H"
getRef={qrCode}
/>
</ToolTipMenu>
</View>
<QRCodeComponent value={bip21encoded} />
<BlueCopyTextToClipboard text={isCustom ? bip21encoded : address} />
</View>
<View style={styles.share}>
@ -380,17 +345,6 @@ const ReceiveDetails = () => {
);
};
ReceiveDetails.actionKeys = {
Share: 'share',
};
ReceiveDetails.actionIcons = {
Share: {
iconType: 'SYSTEM',
iconValue: 'square.and.arrow.up',
},
};
ReceiveDetails.navigationOptions = navigationStyle(
{
closeButton: true,

2
screen/transactions/details.js
View file

@ -249,7 +249,7 @@ TransactionsDetails.actionKeys = {
TransactionsDetails.actionIcons = {
Clipboard: {
iconType: 'SYSTEM',
iconValue: 'arrow.right.doc.on.clipboard',
iconValue: 'doc.on.doc',
},
};

20
screen/wallets/addMultisigStep2.js
View file

@ -19,7 +19,6 @@ import {
import { Icon } from 'react-native-elements';
import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
import { getSystemName } from 'react-native-device-info';
import QRCode from 'react-native-qrcode-svg';
import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
import {
@ -42,16 +41,16 @@ import MultipleStepsListItem, {
} from '../../components/MultipleStepsListItem';
import { BlueStorageContext } from '../../blue_modules/storage-context';
import { encodeUR } from '../../blue_modules/ur';
import QRCodeComponent from '../../components/QRCodeComponent';
const prompt = require('../../blue_modules/prompt');
const A = require('../../blue_modules/analytics');
const fs = require('../../blue_modules/fs');
const isDesktop = getSystemName() === 'Mac OS X';
const staticCache = {};
const BlueElectrum = require('../../blue_modules/BlueElectrum');
const WalletsAddMultisigStep2 = () => {
const { addWallet, saveToDisk } = useContext(BlueStorageContext);
const { addWallet, saveToDisk, isElectrumDisabled } = useContext(BlueStorageContext);
const { colors } = useTheme();
const navigation = useNavigation();
@ -67,7 +66,6 @@ const WalletsAddMultisigStep2 = () => {
const [cosignerXpubFilename, setCosignerXpubFilename] = useState('bw-cosigner.json');
const [vaultKeyData, setVaultKeyData] = useState({ keyIndex: 1, xpub: '', seed: '', isLoading: false }); // string rendered in modal
const [importText, setImportText] = useState('');
const [isElectrumDisabled, setIsElectrumDisabled] = useState(true);
const openScannerButton = useRef();
const data = useRef(new Array(n));
const hasUnsavedChanges = Boolean(cosigners.length > 0 && cosigners.length !== n);
@ -147,9 +145,6 @@ const WalletsAddMultisigStep2 = () => {
setTimeout(_onCreate, 100);
};
useEffect(() => {
BlueElectrum.isDisabled().then(setIsElectrumDisabled);
}, []);
useEffect(() => {
navigation.addListener('beforeRemove', e => {
if (e.data.action.type === 'POP' && hasUnsavedChanges) {
@ -627,16 +622,7 @@ const WalletsAddMultisigStep2 = () => {
<View style={[styles.modalContent, stylesHook.modalContent, styles.alignItemsCenter]}>
<Text style={[styles.headerText, stylesHook.textDestination]}>{loc.multisig.this_is_cosigners_xpub}</Text>
<BlueSpacing20 />
<View style={styles.qrCodeContainer}>
<QRCode
value={cosignerXpubURv2}
size={260}
color="#000000"
logoBackgroundColor={colors.brandingColor}
backgroundColor="#FFFFFF"
ecl="H"
/>
</View>
<QRCodeComponent value={cosignerXpubURv2} size={260} />
<BlueSpacing20 />
<View style={styles.squareButtonWrapper}>
{isLoading ? (

21
screen/wallets/export.js
View file

@ -1,6 +1,5 @@
import React, { useState, useCallback, useContext } from 'react';
import { useWindowDimensions, InteractionManager, ScrollView, ActivityIndicator, StatusBar, View, StyleSheet } from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import { useTheme, useNavigation, useFocusEffect, useRoute } from '@react-navigation/native';
import { BlueSpacing20, SafeBlueArea, BlueText, BlueCopyTextToClipboard, BlueCard } from '../../BlueComponents';
@ -10,6 +9,7 @@ import Biometric from '../../class/biometrics';
import { LegacyWallet, LightningCustodianWallet, SegwitBech32Wallet, SegwitP2SHWallet, WatchOnlyWallet } from '../../class';
import loc from '../../loc';
import { BlueStorageContext } from '../../blue_modules/storage-context';
import QRCodeComponent from '../../components/QRCodeComponent';
const styles = StyleSheet.create({
loading: {
@ -21,7 +21,6 @@ const styles = StyleSheet.create({
justifyContent: 'center',
flexGrow: 1,
},
activeQrcode: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
type: {
fontSize: 17,
fontWeight: '700',
@ -113,18 +112,12 @@ const WalletExport = () => {
<BlueSpacing20 />
{secrets.map(s => (
<React.Fragment key={s}>
<View style={styles.activeQrcode}>
<QRCode
value={wallet.getSecret()}
logo={require('../../img/qr-code.png')}
size={height > width ? width - 40 : width / 2}
logoSize={70}
color="#000000"
logoBackgroundColor={colors.brandingColor}
backgroundColor="#FFFFFF"
ecl="H"
/>
</View>
<QRCodeComponent
isMenuAvailable={false}
value={wallet.getSecret()}
size={height > width ? width - 40 : width / 2}
logoSize={70}
/>
{wallet.type !== WatchOnlyWallet.type && <BlueText style={stylesHook.warning}>{loc.wallets.warning_do_not_disclose}</BlueText>}
<BlueSpacing20 />
{wallet.type === LightningCustodianWallet.type || wallet.type === WatchOnlyWallet.type ? (

16
screen/wallets/pleaseBackupLNDHub.js
View file

@ -1,13 +1,13 @@
import React, { useCallback, useContext, useEffect, useState } from 'react';
import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
import { View, StyleSheet, ScrollView, BackHandler, StatusBar } from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import { BlueButton, BlueCopyTextToClipboard, BlueSpacing20, BlueTextCentered, SafeBlueArea } from '../../BlueComponents';
import navigationStyle from '../../components/navigationStyle';
import Privacy from '../../blue_modules/Privacy';
import loc from '../../loc';
import { BlueStorageContext } from '../../blue_modules/storage-context';
import QRCodeComponent from '../../components/QRCodeComponent';
const PleaseBackupLNDHub = () => {
const { wallets } = useContext(BlueStorageContext);
@ -32,7 +32,6 @@ const PleaseBackupLNDHub = () => {
alignItems: 'center',
padding: 20,
},
qrCodeContainer: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
});
useEffect(() => {
@ -59,18 +58,7 @@ const PleaseBackupLNDHub = () => {
<BlueSpacing20 />
</View>
<BlueSpacing20 />
<View style={styles.qrCodeContainer}>
<QRCode
value={wallet.getSecret()}
logo={require('../../img/qr-code.png')}
logoSize={90}
color="#000000"
logoBackgroundColor={colors.brandingColor}
backgroundColor="#FFFFFF"
ecl="H"
size={qrCodeSize}
/>
</View>
<QRCodeComponent value={wallet.getSecret()} size={qrCodeSize} />
<BlueCopyTextToClipboard text={wallet.getSecret()} />
<BlueSpacing20 />
<BlueButton onPress={pop} title={loc.pleasebackup.ok_lnd} />

14
screen/wallets/viewEditMultisigCosigners.js
View file

@ -39,10 +39,10 @@ import MultipleStepsListItem, {
} from '../../components/MultipleStepsListItem';
import Privacy from '../../blue_modules/Privacy';
import Biometric from '../../class/biometrics';
import QRCode from 'react-native-qrcode-svg';
import { SquareButton } from '../../components/SquareButton';
import { isMacCatalina } from '../../blue_modules/environment';
import { encodeUR } from '../../blue_modules/ur';
import QRCodeComponent from '../../components/QRCodeComponent';
const fs = require('../../blue_modules/fs');
const ViewEditMultisigCosigners = () => {
@ -548,16 +548,7 @@ const ViewEditMultisigCosigners = () => {
<KeyboardAvoidingView enabled={!Platform.isPad} 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={exportStringURv2}
size={260}
color="#000000"
logoBackgroundColor={colors.brandingColor}
backgroundColor="#FFFFFF"
ecl="H"
/>
</View>
<QRCodeComponent value={exportStringURv2} size={260} />
<BlueSpacing20 />
<View style={styles.squareButtonWrapper}>
<SquareButton style={[styles.exportButton, stylesHook.exportButton]} onPress={exportCosigner} title={loc.multisig.share} />
@ -742,7 +733,6 @@ const styles = StyleSheet.create({
position: 'relative',
bottom: -3,
},
qrCodeContainer: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
tipLabelText: {
fontWeight: '500',
},

56
screen/wallets/xpub.js
View file

@ -1,6 +1,5 @@
import React, { useCallback, useContext, useRef, useState } from 'react';
import React, { useCallback, useContext, useState } from 'react';
import { InteractionManager, useWindowDimensions, ActivityIndicator, View, StatusBar, StyleSheet } from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import { useFocusEffect, useRoute, useNavigation, useTheme } from '@react-navigation/native';
import navigationStyle from '../../components/navigationStyle';
import { BlueSpacing20, SafeBlueArea, BlueText, BlueCopyTextToClipboard } from '../../BlueComponents';
@ -8,8 +7,7 @@ import Privacy from '../../blue_modules/Privacy';
import Biometric from '../../class/biometrics';
import loc from '../../loc';
import { BlueStorageContext } from '../../blue_modules/storage-context';
import Share from 'react-native-share';
import ToolTipMenu from '../../components/TooltipMenu';
import QRCodeComponent from '../../components/QRCodeComponent';
const styles = StyleSheet.create({
root: {
@ -21,7 +19,6 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
},
qrCodeContainer: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
});
const WalletXpub = () => {
@ -35,7 +32,6 @@ const WalletXpub = () => {
const { colors } = useTheme();
const { width, height } = useWindowDimensions();
const stylesHook = StyleSheet.create({ root: { backgroundColor: colors.elevated } });
const qrCode = useRef();
useFocusEffect(
useCallback(() => {
@ -62,17 +58,8 @@ const WalletXpub = () => {
}, [goBack, walletID]),
);
const handleShareQRCode = () => {
qrCode.current.toDataURL(data => {
const shareImageBase64 = {
url: `data:image/png;base64,${data}`,
};
Share.open(shareImageBase64).catch(error => console.log(error));
});
};
return isLoading ? (
<View style={[styles.root, stylesHook.root]}>
<View style={[styles.container, stylesHook.root]}>
<ActivityIndicator />
</View>
) : (
@ -83,30 +70,8 @@ const WalletXpub = () => {
<BlueText>{wallet.typeReadable}</BlueText>
</View>
<BlueSpacing20 />
<View style={styles.qrCodeContainer}>
<ToolTipMenu
actions={[
{
id: WalletXpub.actionKeys.Share,
text: loc.receive.details_share,
icon: WalletXpub.actionIcons.Share,
},
]}
onPress={handleShareQRCode}
>
<QRCode
value={xPub}
logo={require('../../img/qr-code.png')}
size={height > width ? width - 40 : width / 2}
logoSize={90}
color="#000000"
logoBackgroundColor={colors.brandingColor}
backgroundColor="#FFFFFF"
ecl="H"
getRef={qrCode}
/>
</ToolTipMenu>
</View>
<QRCodeComponent value={xPub} size={height > width ? width - 40 : width / 2} />
<BlueSpacing20 />
<BlueCopyTextToClipboard text={xPubText} />
@ -115,17 +80,6 @@ const WalletXpub = () => {
);
};
WalletXpub.actionKeys = {
Share: 'share',
};
WalletXpub.actionIcons = {
Share: {
iconType: 'SYSTEM',
iconValue: 'square.and.arrow.up',
},
};
WalletXpub.navigationOptions = navigationStyle(
{
closeButton: true,