mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2024-11-19 18:00:17 +01:00
Merge pull request #3492 from BlueWallet/shareqr
ADD: Share/Save QRCode
This commit is contained in:
commit
2fddf7c61b
@ -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}
|
||||
|
@ -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} />
|
||||
|
Loading…
Reference in New Issue
Block a user