mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2024-11-19 18:00:17 +01:00
498 lines
16 KiB
JavaScript
498 lines
16 KiB
JavaScript
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
import { useRoute } from '@react-navigation/native';
|
|
import PropTypes from 'prop-types';
|
|
import {
|
|
ActivityIndicator,
|
|
FlatList,
|
|
Keyboard,
|
|
LayoutAnimation,
|
|
PixelRatio,
|
|
Platform,
|
|
StyleSheet,
|
|
Text,
|
|
TextInput,
|
|
TouchableWithoutFeedback,
|
|
useWindowDimensions,
|
|
View,
|
|
} from 'react-native';
|
|
import { Avatar, Badge, Icon, ListItem as RNElementsListItem } from '@rneui/themed';
|
|
import * as RNLocalize from 'react-native-localize';
|
|
import debounce from '../../blue_modules/debounce';
|
|
import { BlueSpacing10, BlueSpacing20 } from '../../BlueComponents';
|
|
import BottomModal from '../../components/BottomModal';
|
|
import Button from '../../components/Button';
|
|
import { FButton, FContainer } from '../../components/FloatButtons';
|
|
import ListItem from '../../components/ListItem';
|
|
import SafeArea from '../../components/SafeArea';
|
|
import { useTheme } from '../../components/themes';
|
|
import loc, { formatBalance } from '../../loc';
|
|
import { BitcoinUnit } from '../../models/bitcoinUnits';
|
|
import { useStorage } from '../../hooks/context/useStorage';
|
|
import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
|
|
|
|
const FrozenBadge = () => {
|
|
const { colors } = useTheme();
|
|
const oStyles = StyleSheet.create({
|
|
freeze: { backgroundColor: colors.redBG, borderWidth: 0 },
|
|
freezeText: { color: colors.redText },
|
|
});
|
|
return <Badge value={loc.cc.freeze} badgeStyle={oStyles.freeze} textStyle={oStyles.freezeText} />;
|
|
};
|
|
|
|
const ChangeBadge = () => {
|
|
const { colors } = useTheme();
|
|
const oStyles = StyleSheet.create({
|
|
change: { backgroundColor: colors.buttonDisabledBackgroundColor, borderWidth: 0 },
|
|
changeText: { color: colors.alternativeTextColor },
|
|
});
|
|
return <Badge value={loc.cc.change} badgeStyle={oStyles.change} textStyle={oStyles.changeText} />;
|
|
};
|
|
|
|
const OutputList = ({
|
|
item: { address, txid, value, vout, confirmations = 0 },
|
|
balanceUnit = BitcoinUnit.BTC,
|
|
oMemo,
|
|
frozen,
|
|
change,
|
|
onOpen,
|
|
selected,
|
|
selectionStarted,
|
|
onSelect,
|
|
onDeSelect,
|
|
}) => {
|
|
const { colors } = useTheme();
|
|
const { txMetadata } = useStorage();
|
|
const memo = oMemo || txMetadata[txid]?.memo || '';
|
|
const color = `#${txid.substring(0, 6)}`;
|
|
const amount = formatBalance(value, balanceUnit, true);
|
|
|
|
const oStyles = StyleSheet.create({
|
|
container: { borderBottomColor: colors.lightBorder, backgroundColor: colors.elevated },
|
|
containerSelected: {
|
|
backgroundColor: colors.ballOutgoingExpired,
|
|
borderBottomColor: 'rgba(0, 0, 0, 0)',
|
|
},
|
|
avatar: { borderColor: 'white', borderWidth: 1, backgroundColor: color },
|
|
amount: { fontWeight: 'bold', color: colors.foregroundColor },
|
|
memo: { fontSize: 13, marginTop: 3, color: colors.alternativeTextColor },
|
|
});
|
|
|
|
let onPress = onOpen;
|
|
if (selectionStarted) {
|
|
onPress = selected ? onDeSelect : onSelect;
|
|
}
|
|
|
|
return (
|
|
<RNElementsListItem bottomDivider onPress={onPress} containerStyle={selected ? oStyles.containerSelected : oStyles.container}>
|
|
<RNElementsListItem.CheckBox
|
|
checkedColor="#0070FF"
|
|
iconType="font-awesome"
|
|
checkedIcon="check-square"
|
|
checked={selected}
|
|
onPress={selected ? onDeSelect : onSelect}
|
|
/>
|
|
<RNElementsListItem.Content>
|
|
<RNElementsListItem.Title style={oStyles.amount}>{amount}</RNElementsListItem.Title>
|
|
<RNElementsListItem.Subtitle style={oStyles.memo} numberOfLines={1} ellipsizeMode="middle">
|
|
{memo || address}
|
|
</RNElementsListItem.Subtitle>
|
|
</RNElementsListItem.Content>
|
|
{change && <ChangeBadge />}
|
|
{frozen && <FrozenBadge />}
|
|
</RNElementsListItem>
|
|
);
|
|
};
|
|
|
|
OutputList.propTypes = {
|
|
item: PropTypes.shape({
|
|
address: PropTypes.string.isRequired,
|
|
txid: PropTypes.string.isRequired,
|
|
value: PropTypes.number.isRequired,
|
|
vout: PropTypes.number.isRequired,
|
|
confirmations: PropTypes.number,
|
|
}),
|
|
balanceUnit: PropTypes.string,
|
|
oMemo: PropTypes.string,
|
|
frozen: PropTypes.bool,
|
|
change: PropTypes.bool,
|
|
onOpen: PropTypes.func,
|
|
selected: PropTypes.bool,
|
|
selectionStarted: PropTypes.bool,
|
|
onSelect: PropTypes.func,
|
|
onDeSelect: PropTypes.func,
|
|
};
|
|
|
|
const OutputModal = ({ item: { address, txid, value, vout, confirmations = 0 }, balanceUnit = BitcoinUnit.BTC, oMemo }) => {
|
|
const { colors } = useTheme();
|
|
const { txMetadata } = useStorage();
|
|
const memo = oMemo || txMetadata[txid]?.memo || '';
|
|
const fullId = `${txid}:${vout}`;
|
|
const color = `#${txid.substring(0, 6)}`;
|
|
const amount = formatBalance(value, balanceUnit, true);
|
|
|
|
const oStyles = StyleSheet.create({
|
|
container: { paddingHorizontal: 0, borderBottomColor: colors.lightBorder, backgroundColor: 'transparent' },
|
|
avatar: { borderColor: 'white', borderWidth: 1, backgroundColor: color },
|
|
amount: { fontWeight: 'bold', color: colors.foregroundColor },
|
|
tranContainer: { paddingLeft: 20 },
|
|
tranText: { fontWeight: 'normal', fontSize: 13, color: colors.alternativeTextColor },
|
|
memo: { fontSize: 13, marginTop: 3, color: colors.alternativeTextColor },
|
|
});
|
|
const confirmationsFormatted = new Intl.NumberFormat(RNLocalize.getLocales()[0].languageCode, { maximumSignificantDigits: 3 }).format(
|
|
confirmations,
|
|
);
|
|
|
|
return (
|
|
<RNElementsListItem bottomDivider containerStyle={oStyles.container}>
|
|
<Avatar rounded overlayContainerStyle={oStyles.avatar} />
|
|
<RNElementsListItem.Content>
|
|
<RNElementsListItem.Title numberOfLines={1} adjustsFontSizeToFit style={oStyles.amount}>
|
|
{amount}
|
|
<View style={oStyles.tranContainer}>
|
|
<Text style={oStyles.tranText}>{loc.formatString(loc.transactions.list_conf, { number: confirmationsFormatted })}</Text>
|
|
</View>
|
|
</RNElementsListItem.Title>
|
|
{memo ? (
|
|
<>
|
|
<RNElementsListItem.Subtitle style={oStyles.memo}>{memo}</RNElementsListItem.Subtitle>
|
|
<BlueSpacing10 />
|
|
</>
|
|
) : null}
|
|
<RNElementsListItem.Subtitle style={oStyles.memo}>{address}</RNElementsListItem.Subtitle>
|
|
<BlueSpacing10 />
|
|
<RNElementsListItem.Subtitle style={oStyles.memo}>{fullId}</RNElementsListItem.Subtitle>
|
|
</RNElementsListItem.Content>
|
|
</RNElementsListItem>
|
|
);
|
|
};
|
|
|
|
OutputModal.propTypes = {
|
|
item: PropTypes.shape({
|
|
address: PropTypes.string.isRequired,
|
|
txid: PropTypes.string.isRequired,
|
|
value: PropTypes.number.isRequired,
|
|
vout: PropTypes.number.isRequired,
|
|
confirmations: PropTypes.number,
|
|
}),
|
|
balanceUnit: PropTypes.string,
|
|
oMemo: PropTypes.string,
|
|
};
|
|
|
|
const mStyles = StyleSheet.create({
|
|
memoTextInput: {
|
|
flexDirection: 'row',
|
|
borderWidth: 1,
|
|
borderBottomWidth: 0.5,
|
|
minHeight: 44,
|
|
height: 44,
|
|
alignItems: 'center',
|
|
marginVertical: 8,
|
|
borderRadius: 4,
|
|
paddingHorizontal: 8,
|
|
color: '#81868e',
|
|
},
|
|
buttonContainer: {
|
|
height: 45,
|
|
marginBottom: 36,
|
|
marginHorizontal: 24,
|
|
},
|
|
});
|
|
|
|
const transparentBackground = { backgroundColor: 'transparent' };
|
|
const OutputModalContent = ({ output, wallet, onUseCoin, frozen, setFrozen }) => {
|
|
const { colors } = useTheme();
|
|
const { txMetadata, saveToDisk } = useStorage();
|
|
const [memo, setMemo] = useState(wallet.getUTXOMetadata(output.txid, output.vout).memo || txMetadata[output.txid]?.memo || '');
|
|
const onMemoChange = value => setMemo(value);
|
|
const switchValue = useMemo(() => ({ value: frozen, onValueChange: value => setFrozen(value) }), [frozen, setFrozen]);
|
|
|
|
// save on form change. Because effect called on each event, debounce it.
|
|
const debouncedSaveMemo = useRef(
|
|
debounce(async m => {
|
|
wallet.setUTXOMetadata(output.txid, output.vout, { memo: m });
|
|
await saveToDisk();
|
|
}, 500),
|
|
);
|
|
useEffect(() => {
|
|
debouncedSaveMemo.current(memo);
|
|
}, [memo]);
|
|
|
|
return (
|
|
<View style={styles.padding}>
|
|
<OutputModal item={output} balanceUnit={wallet.getPreferredBalanceUnit()} />
|
|
<BlueSpacing20 />
|
|
<TextInput
|
|
testID="OutputMemo"
|
|
placeholder={loc.send.details_note_placeholder}
|
|
value={memo}
|
|
placeholderTextColor="#81868e"
|
|
style={[
|
|
mStyles.memoTextInput,
|
|
{
|
|
borderColor: colors.formBorder,
|
|
borderBottomColor: colors.formBorder,
|
|
backgroundColor: colors.inputBackgroundColor,
|
|
},
|
|
]}
|
|
onChangeText={onMemoChange}
|
|
/>
|
|
<ListItem
|
|
title={loc.cc.freezeLabel}
|
|
containerStyle={transparentBackground}
|
|
Component={TouchableWithoutFeedback}
|
|
switch={switchValue}
|
|
/>
|
|
<BlueSpacing20 />
|
|
</View>
|
|
);
|
|
};
|
|
|
|
OutputModalContent.propTypes = {
|
|
output: PropTypes.object,
|
|
wallet: PropTypes.object,
|
|
onUseCoin: PropTypes.func.isRequired,
|
|
frozen: PropTypes.bool.isRequired,
|
|
setFrozen: PropTypes.func.isRequired,
|
|
};
|
|
|
|
const CoinControl = () => {
|
|
const { colors } = useTheme();
|
|
const navigation = useExtendedNavigation();
|
|
const { width } = useWindowDimensions();
|
|
const bottomModalRef = useRef(null);
|
|
const { walletID, onUTXOChoose } = useRoute().params;
|
|
const { wallets, saveToDisk, sleep } = useStorage();
|
|
const wallet = wallets.find(w => w.getID() === walletID);
|
|
// sort by height ascending, txid , vout ascending
|
|
const utxo = wallet.getUtxo(true).sort((a, b) => a.height - b.height || a.txid.localeCompare(b.txid) || a.vout - b.vout);
|
|
const [output, setOutput] = useState();
|
|
const [loading, setLoading] = useState(true);
|
|
const [selected, setSelected] = useState([]);
|
|
const [frozen, setFrozen] = useState(
|
|
utxo.filter(out => wallet.getUTXOMetadata(out.txid, out.vout).frozen).map(({ txid, vout }) => `${txid}:${vout}`),
|
|
);
|
|
|
|
// save frozen status. Because effect called on each event, debounce it.
|
|
const debouncedSaveFronen = useRef(
|
|
debounce(async frzn => {
|
|
utxo.forEach(({ txid, vout }) => {
|
|
wallet.setUTXOMetadata(txid, vout, { frozen: frzn.includes(`${txid}:${vout}`) });
|
|
});
|
|
await saveToDisk();
|
|
}, 500),
|
|
);
|
|
useEffect(() => {
|
|
debouncedSaveFronen.current(frozen);
|
|
}, [frozen]);
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
try {
|
|
await Promise.race([wallet.fetchUtxo(), sleep(10000)]);
|
|
} catch (e) {
|
|
console.log('coincontrol wallet.fetchUtxo() failed'); // either sleep expired or fetchUtxo threw an exception
|
|
}
|
|
const freshUtxo = wallet.getUtxo(true);
|
|
setFrozen(freshUtxo.filter(out => wallet.getUTXOMetadata(out.txid, out.vout).frozen).map(({ txid, vout }) => `${txid}:${vout}`));
|
|
setLoading(false);
|
|
})();
|
|
}, [wallet, setLoading, sleep]);
|
|
|
|
const stylesHook = StyleSheet.create({
|
|
tip: {
|
|
backgroundColor: colors.ballOutgoingExpired,
|
|
},
|
|
});
|
|
|
|
const tipCoins = () => {
|
|
if (utxo.length === 0) return null;
|
|
|
|
let text = loc.cc.tip;
|
|
if (selected.length > 0) {
|
|
// show summ of coins if any selected
|
|
const summ = selected.reduce((prev, curr) => {
|
|
return prev + utxo.find(({ txid, vout }) => `${txid}:${vout}` === curr).value;
|
|
}, 0);
|
|
|
|
const value = formatBalance(summ, wallet.getPreferredBalanceUnit(), true);
|
|
text = loc.formatString(loc.cc.selected_summ, { value });
|
|
}
|
|
|
|
return (
|
|
<View style={[styles.tip, stylesHook.tip]}>
|
|
<Text style={{ color: colors.foregroundColor }}>{text}</Text>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const handleChoose = item => setOutput(item);
|
|
|
|
const handleUseCoin = async u => {
|
|
setOutput(null);
|
|
navigation.pop();
|
|
onUTXOChoose(u);
|
|
};
|
|
|
|
const handleMassFreeze = () => {
|
|
if (allFrozen) {
|
|
setFrozen(f => f.filter(i => !selected.includes(i))); // unfreeze
|
|
} else {
|
|
setFrozen(f => [...new Set([...f, ...selected])]); // freeze
|
|
}
|
|
};
|
|
|
|
const handleMassUse = () => {
|
|
const fUtxo = utxo.filter(({ txid, vout }) => selected.includes(`${txid}:${vout}`));
|
|
handleUseCoin(fUtxo);
|
|
};
|
|
|
|
// check if any outputs are selected
|
|
const selectionStarted = selected.length > 0;
|
|
// check if all selected items are frozen
|
|
const allFrozen = selectionStarted && selected.reduce((prev, curr) => (prev ? frozen.includes(curr) : false), true);
|
|
const buttonFontSize = PixelRatio.roundToNearestPixel(width / 26) > 22 ? 22 : PixelRatio.roundToNearestPixel(width / 26);
|
|
|
|
const renderItem = p => {
|
|
const { memo } = wallet.getUTXOMetadata(p.item.txid, p.item.vout);
|
|
const change = wallet.addressIsChange(p.item.address);
|
|
const oFrozen = frozen.includes(`${p.item.txid}:${p.item.vout}`);
|
|
return (
|
|
<OutputList
|
|
balanceUnit={wallet.getPreferredBalanceUnit()}
|
|
item={p.item}
|
|
oMemo={memo}
|
|
frozen={oFrozen}
|
|
change={change}
|
|
onOpen={() => handleChoose(p.item)}
|
|
selected={selected.includes(`${p.item.txid}:${p.item.vout}`)}
|
|
selectionStarted={selectionStarted}
|
|
onSelect={() => {
|
|
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); // animate buttons show
|
|
setSelected(s => [...s, `${p.item.txid}:${p.item.vout}`]);
|
|
}}
|
|
onDeSelect={() => {
|
|
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); // animate buttons show
|
|
setSelected(s => s.filter(i => i !== `${p.item.txid}:${p.item.vout}`));
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const renderOutputModalContent = () => {
|
|
const oFrozen = frozen.includes(`${output.txid}:${output.vout}`);
|
|
const setOFrozen = value => {
|
|
if (value) {
|
|
setFrozen(f => [...f, `${output.txid}:${output.vout}`]);
|
|
} else {
|
|
setFrozen(f => f.filter(i => i !== `${output.txid}:${output.vout}`));
|
|
}
|
|
};
|
|
return <OutputModalContent output={output} wallet={wallet} onUseCoin={handleUseCoin} frozen={oFrozen} setFrozen={setOFrozen} />;
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (output) {
|
|
bottomModalRef.current?.present();
|
|
}
|
|
}, [output]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<SafeArea style={[styles.center, { backgroundColor: colors.elevated }]}>
|
|
<ActivityIndicator testID="Loading" />
|
|
</SafeArea>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={[styles.root, { backgroundColor: colors.elevated }]}>
|
|
{utxo.length === 0 && (
|
|
<View style={styles.empty}>
|
|
<Text style={{ color: colors.foregroundColor }}>{loc.cc.empty}</Text>
|
|
</View>
|
|
)}
|
|
|
|
<BottomModal
|
|
ref={bottomModalRef}
|
|
onClose={() => {
|
|
Keyboard.dismiss();
|
|
setOutput(false);
|
|
}}
|
|
backgroundColor={colors.elevated}
|
|
footer={
|
|
<View style={mStyles.buttonContainer}>
|
|
<Button
|
|
testID="UseCoin"
|
|
title={loc.cc.use_coin}
|
|
onPress={async () => {
|
|
await bottomModalRef.current?.dismiss();
|
|
handleUseCoin([output]);
|
|
}}
|
|
/>
|
|
</View>
|
|
}
|
|
contentContainerStyle={styles.modalMinHeight}
|
|
>
|
|
{output && renderOutputModalContent()}
|
|
</BottomModal>
|
|
<FlatList
|
|
ListHeaderComponent={tipCoins}
|
|
data={utxo}
|
|
renderItem={renderItem}
|
|
keyExtractor={item => `${item.txid}:${item.vout}`}
|
|
contentInset={{ top: 0, left: 0, bottom: 70, right: 0 }}
|
|
/>
|
|
|
|
{selectionStarted && (
|
|
<FContainer>
|
|
<FButton
|
|
onPress={handleMassFreeze}
|
|
text={allFrozen ? loc.cc.freezeLabel_un : loc.cc.freezeLabel}
|
|
icon={<Icon name="snowflake" size={buttonFontSize} type="font-awesome-5" color={colors.buttonAlternativeTextColor} />}
|
|
/>
|
|
<FButton
|
|
onPress={handleMassUse}
|
|
text={selected.length > 1 ? loc.cc.use_coins : loc.cc.use_coin}
|
|
icon={
|
|
<View style={styles.sendIcon}>
|
|
<Icon name="arrow-down" size={buttonFontSize} type="font-awesome" color={colors.buttonAlternativeTextColor} />
|
|
</View>
|
|
}
|
|
/>
|
|
</FContainer>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
root: {
|
|
flex: 1,
|
|
},
|
|
center: {
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
padding: {
|
|
padding: 16,
|
|
},
|
|
modalMinHeight: Platform.OS === 'android' ? { minHeight: 490 } : {},
|
|
empty: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: 24,
|
|
},
|
|
tip: {
|
|
marginHorizontal: 16,
|
|
borderRadius: 12,
|
|
padding: 16,
|
|
marginVertical: 24,
|
|
},
|
|
sendIcon: {
|
|
transform: [{ rotate: '225deg' }],
|
|
},
|
|
});
|
|
|
|
export default CoinControl;
|