Merge pull request #3492 from BlueWallet/shareqr

ADD: Share/Save QRCode
This commit is contained in:
GLaDOS 2021-08-03 18:44:31 +01:00 committed by GitHub
commit 2fddf7c61b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 106 additions and 27 deletions

View File

@ -1,5 +1,15 @@
import React, { useContext, useEffect, useRef, useState } from 'react';
import { View, Text, StatusBar, ScrollView, BackHandler, TouchableOpacity, StyleSheet, I18nManager } from 'react-native';
import {
View,
Text,
StatusBar,
ScrollView,
TouchableWithoutFeedback,
BackHandler,
TouchableOpacity,
StyleSheet,
I18nManager,
} from 'react-native';
import Share from 'react-native-share';
import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
import { Icon } from 'react-native-elements';
@ -20,6 +30,7 @@ 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;
@ -32,6 +43,8 @@ const LNDViewInvoice = () => {
const [invoiceStatusChanged, setInvoiceStatusChanged] = useState(false);
const [qrCodeSize, setQRCodeSize] = useState(90);
const fetchInvoiceInterval = useRef();
const qrCode = useRef();
const toolTip = useRef();
const stylesHook = StyleSheet.create({
root: {
backgroundColor: colors.background,
@ -167,6 +180,19 @@ const LNDViewInvoice = () => {
navigate('LNDViewAdditionalInvoiceInformation', { walletID });
};
const showToolTipMenu = () => {
toolTip.current.showMenu();
};
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 });
@ -242,18 +268,32 @@ const LNDViewInvoice = () => {
return (
<ScrollView>
<View style={[styles.activeRoot, stylesHook.root]}>
<View style={styles.activeQrcode}>
<QRCode
value={invoice.payment_request}
logo={require('../../img/qr-code.png')}
size={qrCodeSize}
logoSize={90}
color="#000000"
logoBackgroundColor={colors.brandingColor}
backgroundColor="#FFFFFF"
/>
</View>
<TouchableWithoutFeedback onLongPress={showToolTipMenu}>
<View style={styles.activeQrcode}>
<ToolTipMenu
ref={toolTip}
anchorRef={qrCode}
actions={[
{
id: 'shareQRCode',
text: loc.receive.details_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}
/>
</View>
</TouchableWithoutFeedback>
<BlueSpacing20 />
<BlueText>
{loc.lndViewInvoice.please_pay} {invoice.amt} {loc.lndViewInvoice.sats}

View File

@ -1,14 +1,23 @@
import React, { useCallback, useContext, useState } from 'react';
import { InteractionManager, useWindowDimensions, ActivityIndicator, View, StatusBar, StyleSheet } from 'react-native';
import React, { useCallback, useContext, useRef, useState } from 'react';
import {
InteractionManager,
TouchableWithoutFeedback,
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';
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';
const styles = StyleSheet.create({
root: {
@ -34,6 +43,8 @@ const WalletXpub = () => {
const { colors } = useTheme();
const { width, height } = useWindowDimensions();
const stylesHook = StyleSheet.create({ root: { backgroundColor: colors.elevated } });
const toolTip = useRef();
const qrCode = useRef();
useFocusEffect(
useCallback(() => {
@ -60,6 +71,19 @@ const WalletXpub = () => {
}, [goBack, walletID]),
);
const showToolTipMenu = () => {
toolTip.current.showMenu();
};
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]}>
<ActivityIndicator />
@ -72,18 +96,33 @@ const WalletXpub = () => {
<BlueText>{wallet.typeReadable}</BlueText>
</View>
<BlueSpacing20 />
<View style={styles.qrCodeContainer}>
<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"
/>
</View>
<TouchableWithoutFeedback onLongPress={showToolTipMenu}>
<View style={styles.qrCodeContainer}>
<ToolTipMenu
ref={toolTip}
anchorRef={qrCode}
actions={[
{
id: 'shareQRCode',
text: loc.receive.details_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}
/>
</View>
</TouchableWithoutFeedback>
<BlueSpacing20 />
<BlueCopyTextToClipboard text={xPubText} />