mirrors/BlueWallet
1
0
Fork 0
mirror of https://github.com/BlueWallet/BlueWallet.git synced 2024-11-20 10:12:01 +01:00
Code Issues Packages Projects Releases Wiki Activity
6565fd531d
BlueWallet/screen/receive/details.js

577 lines
19 KiB
JavaScript
Raw Blame History

import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
import {
BackHandler,
InteractionManager,
Keyboard,
KeyboardAvoidingView,
Platform,
ScrollView,
StatusBar,
StyleSheet,
TextInput,
View,
} from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import { useNavigation, useRoute, useTheme, useFocusEffect } from '@react-navigation/native';
import Share from 'react-native-share';
import {
BlueLoading,
BlueCopyTextToClipboard,
BlueButton,
BlueButtonLink,
is,
BlueText,
BlueSpacing20,
BlueAlertWalletExportReminder,
BlueCard,
BlueSpacing40,
BlueBigCheckmark,
} from '../../BlueComponents';
import navigationStyle from '../../components/navigationStyle';
import BottomModal from '../../components/BottomModal';
import Privacy from '../../blue_modules/Privacy';
import { Chain, BitcoinUnit } from '../../models/bitcoinUnits';
import HandoffComponent from '../../components/handoff';
import AmountInput from '../../components/AmountInput';
import DeeplinkSchemaMatch from '../../class/deeplink-schema-match';
import loc, { formatBalance } from '../../loc';
import { BlueStorageContext } from '../../blue_modules/storage-context';
import Notifications from '../../blue_modules/notifications';
import ToolTipMenu from '../../components/TooltipMenu';
import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
import { TransactionPendingIconBig } from '../../components/TransactionPendingIconBig';
import * as BlueElectrum from '../../blue_modules/BlueElectrum';
const currency = require('../../blue_modules/currency');
const ReceiveDetails = () => {
const { walletID, address } = useRoute().params;
const { wallets, saveToDisk, sleep, isElectrumDisabled, fetchAndSaveWalletTransactions } = useContext(BlueStorageContext);
const wallet = wallets.find(w => w.getID() === walletID);
const [customLabel, setCustomLabel] = useState();
const [customAmount, setCustomAmount] = useState();
const [customUnit, setCustomUnit] = useState(BitcoinUnit.BTC);
const [bip21encoded, setBip21encoded] = useState();
const [isCustom, setIsCustom] = useState(false);
const [isCustomModalVisible, setIsCustomModalVisible] = useState(false);
const [showPendingBalance, setShowPendingBalance] = useState(false);
const [showConfirmedBalance, setShowConfirmedBalance] = useState(false);
const [showAddress, setShowAddress] = useState(false);
const { navigate, goBack, setParams } = useNavigation();
const { colors } = useTheme();
const qrCode = useRef();
const [intervalMs, setIntervalMs] = useState(5000);
const [eta, setEta] = useState('');
const [initialConfirmed, setInitialConfirmed] = useState(0);
const [initialUnconfirmed, setInitialUnconfirmed] = useState(0);
const [displayBalance, setDisplayBalance] = useState('');
const fetchAddressInterval = useRef();
const styles = StyleSheet.create({
modalContent: {
backgroundColor: colors.modal,
padding: 22,
justifyContent: 'center',
alignItems: 'center',
borderTopLeftRadius: 16,
borderTopRightRadius: 16,
borderTopColor: colors.foregroundColor,
borderWidth: colors.borderWidth,
minHeight: 350,
height: 350,
},
customAmount: {
flexDirection: 'row',
borderColor: colors.formBorder,
borderBottomColor: colors.formBorder,
borderWidth: 1.0,
borderBottomWidth: 0.5,
backgroundColor: colors.inputBackgroundColor,
minHeight: 44,
height: 44,
marginHorizontal: 20,
alignItems: 'center',
marginVertical: 8,
borderRadius: 4,
},
customAmountText: {
flex: 1,
marginHorizontal: 8,
color: colors.foregroundColor,
minHeight: 33,
},
qrCodeContainer: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
root: {
flexGrow: 1,
backgroundColor: colors.elevated,
justifyContent: 'space-between',
},
scrollBody: {
marginTop: 32,
flexGrow: 1,
alignItems: 'center',
paddingHorizontal: 16,
},
share: {
justifyContent: 'flex-end',
paddingVertical: 16,
alignItems: 'center',
marginBottom: 8,
},
link: {
marginVertical: 16,
paddingHorizontal: 32,
},
amount: {
color: colors.foregroundColor,
fontWeight: '600',
fontSize: 36,
textAlign: 'center',
},
label: {
color: colors.foregroundColor,
fontWeight: '600',
textAlign: 'center',
paddingBottom: 24,
},
loading: {
alignItems: 'center',
width: 300,
height: 300,
backgroundColor: colors.elevated,
},
modalButton: {
backgroundColor: colors.modalButton,
paddingVertical: 14,
paddingHorizontal: 70,
maxWidth: '80%',
borderRadius: 50,
fontWeight: '700',
},
});
// re-fetching address balance periodically
useEffect(() => {
console.log('receive/defails - useEffect');
if (fetchAddressInterval.current) {
// interval already exists, lets cleanup it and recreate, so theres no duplicate intervals
clearInterval(fetchAddressInterval.current);
fetchAddressInterval.current = undefined;
}
fetchAddressInterval.current = setInterval(async () => {
try {
const decoded = DeeplinkSchemaMatch.bip21decode(bip21encoded);
const address2use = address || decoded.address;
if (!address2use) return;
console.log('checking address', address2use, 'for balance...');
const balance = await BlueElectrum.getBalanceByAddress(address2use);
console.log('...got', balance);
if (balance.unconfirmed > 0) {
if (initialConfirmed === 0 && initialUnconfirmed === 0) {
// saving initial values for later (when tx gets confirmed)
setInitialConfirmed(balance.confirmed);
setInitialUnconfirmed(balance.unconfirmed);
setIntervalMs(25000);
ReactNativeHapticFeedback.trigger('notificationSuccess', { ignoreAndroidSystemSettings: false });
}
const txs = await BlueElectrum.getMempoolTransactionsByAddress(address2use);
const tx = txs.pop();
if (tx) {
const rez = await BlueElectrum.multiGetTransactionByTxid([tx.tx_hash], 10, true);
if (rez && rez[tx.tx_hash] && rez[tx.tx_hash].vsize) {
const satPerVbyte = Math.round(tx.fee / rez[tx.tx_hash].vsize);
const fees = await BlueElectrum.estimateFees();
if (satPerVbyte >= fees.fast) {
setEta(loc.formatString(loc.transactions.eta_10m, { satPerVbyte }));
}
if (satPerVbyte >= fees.medium && satPerVbyte < fees.fast) {
setEta(loc.formatString(loc.transactions.eta_3h, { satPerVbyte }));
}
if (satPerVbyte < fees.medium) {
setEta(loc.formatString(loc.transactions.eta_1d, { satPerVbyte }));
}
}
}
setDisplayBalance(
loc.formatString(loc.transactions.pending_with_amount, {
amt1: formatBalance(balance.unconfirmed, BitcoinUnit.LOCAL_CURRENCY, true).toString(),
amt2: formatBalance(balance.unconfirmed, BitcoinUnit.BTC, true).toString(),
}),
);
setShowPendingBalance(true);
setShowAddress(false);
} else if (balance.unconfirmed === 0 && initialUnconfirmed !== 0) {
// now, handling a case when unconfirmed == 0, but in past it wasnt (i.e. it changed while user was
// staring at the screen)
const balanceToShow = balance.confirmed - initialConfirmed;
if (balanceToShow > 0) {
// address has actually more coins then initially, so we definately gained something
setShowConfirmedBalance(true);
setShowPendingBalance(false);
setShowAddress(false);
clearInterval(fetchAddressInterval.current);
fetchAddressInterval.current = undefined;
setDisplayBalance(
loc.formatString(loc.transactions.received_with_amount, {
amt1: formatBalance(balanceToShow, BitcoinUnit.LOCAL_CURRENCY, true).toString(),
amt2: formatBalance(balanceToShow, BitcoinUnit.BTC, true).toString(),
}),
);
fetchAndSaveWalletTransactions(walletID);
} else {
// rare case, but probable. transaction evicted from mempool (maybe cancelled by the sender)
setShowConfirmedBalance(false);
setShowPendingBalance(false);
setShowAddress(true);
}
}
} catch (error) {
console.log(error);
}
}, intervalMs);
}, [bip21encoded, address, initialConfirmed, initialUnconfirmed, intervalMs, fetchAndSaveWalletTransactions, walletID]);
const handleShareQRCode = () => {
qrCode.current.toDataURL(data => {
const shareImageBase64 = {
url: `data:image/png;base64,${data}`,
};
Share.open(shareImageBase64).catch(error => console.log(error));
});
};
const renderConfirmedBalance = () => {
return (
<ScrollView contentContainerStyle={styles.root} keyboardShouldPersistTaps="always">
<View style={styles.scrollBody}>
{isCustom && (
<>
<BlueText style={styles.label} numberOfLines={1}>
{customLabel}
</BlueText>
</>
)}
<View style={styles.qrCodeContainer}>
<BlueBigCheckmark />
</View>
<BlueSpacing40 />
<BlueText style={styles.label} numberOfLines={1}>
{displayBalance}
</BlueText>
</View>
</ScrollView>
);
};
const renderPendingBalance = () => {
return (
<ScrollView contentContainerStyle={styles.root} keyboardShouldPersistTaps="always">
<View style={styles.scrollBody}>
{isCustom && (
<>
<BlueText style={styles.label} numberOfLines={1}>
{customLabel}
</BlueText>
</>
)}
<View style={styles.qrCodeContainer}>
<TransactionPendingIconBig />
</View>
<BlueSpacing40 />
<BlueText style={styles.label} numberOfLines={1}>
{displayBalance}
</BlueText>
<BlueText style={styles.label} numberOfLines={1}>
{eta}
</BlueText>
</View>
</ScrollView>
);
};
const handleBackButton = () => {
goBack(null);
return true;
};
useEffect(() => {
BackHandler.addEventListener('hardwareBackPress', handleBackButton);
return () => {
BackHandler.removeEventListener('hardwareBackPress', handleBackButton);
clearInterval(fetchAddressInterval.current);
fetchAddressInterval.current = undefined;
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const renderReceiveDetails = () => {
return (
<ScrollView contentContainerStyle={styles.root} keyboardShouldPersistTaps="always">
<View style={styles.scrollBody}>
{isCustom && (
<>
<BlueText testID="CustomAmountText" style={styles.amount} numberOfLines={1}>
{getDisplayAmount()}
</BlueText>
<BlueText testID="CustomAmountDescriptionText" style={styles.label} numberOfLines={1}>
{customLabel}
</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>
<BlueCopyTextToClipboard text={isCustom ? bip21encoded : address} />
</View>
<View style={styles.share}>
<BlueCard>
<BlueButtonLink
style={styles.link}
testID="SetCustomAmountButton"
title={loc.receive.details_setAmount}
onPress={showCustomAmountModal}
/>
<BlueButton onPress={handleShareButtonPressed} title={loc.receive.details_share} />
</BlueCard>
</View>
{renderCustomAmountModal()}
</ScrollView>
);
};
const obtainWalletAddress = useCallback(async () => {
Privacy.enableBlur();
console.log('receive/details - componentDidMount');
wallet.setUserHasSavedExport(true);
await saveToDisk();
let newAddress;
if (address) {
setAddressBIP21Encoded(address);
await Notifications.tryToObtainPermissions();
Notifications.majorTomToGroundControl([address], [], []);
} else {
if (wallet.chain === Chain.ONCHAIN) {
try {
if (!isElectrumDisabled) newAddress = await Promise.race([wallet.getAddressAsync(), sleep(1000)]);
} catch (_) {}
if (newAddress === undefined) {
// either sleep expired or getAddressAsync threw an exception
console.warn('either sleep expired or getAddressAsync threw an exception');
newAddress = wallet._getExternalAddressByIndex(wallet.getNextFreeAddressIndex());
} else {
saveToDisk(); // caching whatever getAddressAsync() generated internally
}
} else if (wallet.chain === Chain.OFFCHAIN) {
try {
await Promise.race([wallet.getAddressAsync(), sleep(1000)]);
newAddress = wallet.getAddress();
} catch (_) {}
if (newAddress === undefined) {
// either sleep expired or getAddressAsync threw an exception
console.warn('either sleep expired or getAddressAsync threw an exception');
newAddress = wallet.getAddress();
} else {
saveToDisk(); // caching whatever getAddressAsync() generated internally
}
}
setAddressBIP21Encoded(newAddress);
await Notifications.tryToObtainPermissions();
Notifications.majorTomToGroundControl([newAddress], [], []);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const setAddressBIP21Encoded = address => {
const bip21encoded = DeeplinkSchemaMatch.bip21encode(address);
setParams({ address });
setBip21encoded(bip21encoded);
setShowAddress(true);
};
useFocusEffect(
useCallback(() => {
const task = InteractionManager.runAfterInteractions(async () => {
if (wallet) {
if (!wallet.getUserHasSavedExport()) {
BlueAlertWalletExportReminder({
onSuccess: obtainWalletAddress,
onFailure: () => {
goBack();
navigate('WalletExportRoot', {
screen: 'WalletExport',
params: {
walletID: wallet.getID(),
},
});
},
});
} else {
obtainWalletAddress();
}
}
});
return () => {
task.cancel();
Privacy.disableBlur();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [wallet]),
);
const dismissCustomAmountModal = () => {
Keyboard.dismiss();
setIsCustomModalVisible(false);
};
const showCustomAmountModal = () => {
setIsCustomModalVisible(true);
};
const createCustomAmountAddress = () => {
setIsCustom(true);
setIsCustomModalVisible(false);
let amount = customAmount;
switch (customUnit) {
case BitcoinUnit.BTC:
// nop
break;
case BitcoinUnit.SATS:
amount = currency.satoshiToBTC(customAmount);
break;
case BitcoinUnit.LOCAL_CURRENCY:
if (AmountInput.conversionCache[amount + BitcoinUnit.LOCAL_CURRENCY]) {
// cache hit! we reuse old value that supposedly doesnt have rounding errors
amount = currency.satoshiToBTC(AmountInput.conversionCache[amount + BitcoinUnit.LOCAL_CURRENCY]);
} else {
amount = currency.fiatToBTC(customAmount);
}
break;
}
setBip21encoded(DeeplinkSchemaMatch.bip21encode(address, { amount, label: customLabel }));
setShowAddress(true);
};
const renderCustomAmountModal = () => {
return (
<BottomModal isVisible={isCustomModalVisible} onClose={dismissCustomAmountModal}>
<KeyboardAvoidingView enabled={!Platform.isPad} behavior={Platform.OS === 'ios' ? 'position' : null}>
<View style={styles.modalContent}>
<AmountInput unit={customUnit} amount={customAmount || ''} onChangeText={setCustomAmount} onAmountUnitChange={setCustomUnit} />
<View style={styles.customAmount}>
<TextInput
onChangeText={setCustomLabel}
placeholderTextColor="#81868e"
placeholder={loc.receive.details_label}
value={customLabel || ''}
numberOfLines={1}
style={styles.customAmountText}
testID="CustomAmountDescription"
/>
</View>
<BlueSpacing20 />
<View>
<BlueButton
testID="CustomAmountSaveButton"
style={styles.modalButton}
title={loc.receive.details_create}
onPress={createCustomAmountAddress}
/>
<BlueSpacing20 />
</View>
<BlueSpacing20 />
</View>
</KeyboardAvoidingView>
</BottomModal>
);
};
const handleShareButtonPressed = () => {
Share.open({ message: bip21encoded }).catch(error => console.log(error));
};
/**
* @returns {string} BTC amount, accounting for current `customUnit` and `customUnit`
*/
const getDisplayAmount = () => {
switch (customUnit) {
case BitcoinUnit.BTC:
return customAmount + ' BTC';
case BitcoinUnit.SATS:
return currency.satoshiToBTC(customAmount) + ' BTC';
case BitcoinUnit.LOCAL_CURRENCY:
return currency.fiatToBTC(customAmount) + ' BTC';
}
return customAmount + ' ' + customUnit;
};
return (
<View style={styles.root}>
<StatusBar barStyle="light-content" />
{address !== undefined && showAddress && (
<HandoffComponent
title={`Bitcoin Transaction ${address}`}
type="io.bluewallet.bluewallet"
url={`https://blockstream.info/address/${address}`}
/>
)}
{showConfirmedBalance ? renderConfirmedBalance() : null}
{showPendingBalance ? renderPendingBalance() : null}
{showAddress ? renderReceiveDetails() : null}
{!showAddress && !showPendingBalance && !showConfirmedBalance ? <BlueLoading /> : null}
</View>
);
};
ReceiveDetails.actionKeys = {
Share: 'share',
};
ReceiveDetails.actionIcons = {
Share: {
iconType: 'SYSTEM',
iconValue: 'square.and.arrow.up',
},
};
ReceiveDetails.navigationOptions = navigationStyle(
{
closeButton: true,
headerLeft: null,
},
opts => ({ ...opts, title: loc.receive.header }),
);
export default ReceiveDetails;
Reference in New Issue View Git Blame Copy Permalink