mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2025-03-13 19:16:52 +01:00
Update WalletTransactions.tsx
This commit is contained in:
Marcos Rodriguez Velez
parent
e8c181359d
commit
d3fd15dcf8
1 changed files with 106 additions and 117 deletions
|
|
@ -70,7 +70,6 @@ const WalletTransactions: React.FC<WalletTransactionsProps> = ({ route }) => {
|
|||
const { colors } = useTheme();
|
||||
const { isElectrumDisabled } = useSettings();
|
||||
const walletActionButtonsRef = useRef<View>(null);
|
||||
const [headerVisible, setHeaderVisible] = useState(true);
|
||||
|
||||
const stylesHook = StyleSheet.create({
|
||||
listHeaderText: {
|
||||
|
|
@ -263,112 +262,16 @@ const WalletTransactions: React.FC<WalletTransactionsProps> = ({ route }) => {
|
|||
index,
|
||||
});
|
||||
|
||||
// Split header into navigation header and list header text
|
||||
const listData: (TransactionListItem | { type: 'navHeader' } | { type: 'listHeader' })[] = useMemo(() => {
|
||||
const transactions = getTransactions(limit).map(tx => ({ ...tx, type: 'transaction' as const }));
|
||||
return [{ type: 'navHeader' }, { type: 'listHeader' }, ...transactions];
|
||||
const listData: Transaction[] = useMemo(() => {
|
||||
const transactions = getTransactions(limit);
|
||||
return transactions;
|
||||
}, [getTransactions, limit]);
|
||||
|
||||
const hasNoTransactions = useMemo(() => getTransactions(1).length === 0, [getTransactions]);
|
||||
|
||||
const renderItem = useCallback(
|
||||
({ item }: { item: TransactionListItem | { type: 'navHeader' } | { type: 'listHeader' } }) => {
|
||||
if ('type' in item && (item.type === 'navHeader' || item.type === 'listHeader')) {
|
||||
if (item.type === 'navHeader') {
|
||||
return wallet ? (
|
||||
<TransactionsNavigationHeader
|
||||
wallet={wallet}
|
||||
onWalletUnitChange={async selectedUnit => {
|
||||
wallet.preferredBalanceUnit = selectedUnit;
|
||||
await saveToDisk();
|
||||
}}
|
||||
unit={wallet.preferredBalanceUnit}
|
||||
onWalletBalanceVisibilityChange={async isShouldBeVisible => {
|
||||
const isBiometricsEnabled = await isBiometricUseCapableAndEnabled();
|
||||
if (wallet?.hideBalance && isBiometricsEnabled) {
|
||||
const unlocked = await unlockWithBiometrics();
|
||||
if (!unlocked) throw new Error('Biometrics failed');
|
||||
}
|
||||
wallet!.hideBalance = isShouldBeVisible;
|
||||
await saveToDisk();
|
||||
}}
|
||||
onManageFundsPressed={id => {
|
||||
if (wallet?.type === MultisigHDWallet.type) {
|
||||
navigateToViewEditCosigners();
|
||||
} else if (wallet?.type === LightningCustodianWallet.type) {
|
||||
if (wallet.getUserHasSavedExport()) {
|
||||
if (!id) return;
|
||||
onManageFundsPressed(id);
|
||||
} else {
|
||||
presentWalletExportReminder()
|
||||
.then(async () => {
|
||||
if (!id) return;
|
||||
wallet!.setUserHasSavedExport(true);
|
||||
await saveToDisk();
|
||||
onManageFundsPressed(id);
|
||||
})
|
||||
.catch(() => {
|
||||
navigate('WalletExportRoot', {
|
||||
screen: 'WalletExport',
|
||||
params: {
|
||||
walletID,
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : null;
|
||||
}
|
||||
if (item.type === 'listHeader') {
|
||||
return (
|
||||
<>
|
||||
<View style={[styles.flex, { backgroundColor: colors.background }]}>
|
||||
<View style={styles.listHeaderTextRow}>
|
||||
<Text style={[styles.listHeaderText, stylesHook.listHeaderText]}>{loc.transactions.list_title}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ backgroundColor: colors.background }}>
|
||||
{wallet?.type === WatchOnlyWallet.type && wallet.isWatchOnlyWarningVisible && (
|
||||
<WatchOnlyWarning
|
||||
handleDismiss={() => {
|
||||
wallet.isWatchOnlyWarningVisible = false;
|
||||
LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
|
||||
saveToDisk();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{hasNoTransactions && (
|
||||
<ScrollView style={[styles.flex, { backgroundColor: colors.background }]} contentContainerStyle={styles.scrollViewContent}>
|
||||
<Text numberOfLines={0} style={styles.emptyTxs}>
|
||||
{(isLightning() && loc.wallets.list_empty_txs1_lightning) || loc.wallets.list_empty_txs1}
|
||||
</Text>
|
||||
{isLightning() && <Text style={styles.emptyTxsLightning}>{loc.wallets.list_empty_txs2_lightning}</Text>}
|
||||
</ScrollView>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
// Regular transaction item
|
||||
return <TransactionListItem item={item as Transaction} itemPriceUnit={wallet?.preferredBalanceUnit} walletID={walletID} />;
|
||||
({ item }: { item: Transaction }) => {
|
||||
return <TransactionListItem item={item} itemPriceUnit={wallet?.preferredBalanceUnit} walletID={walletID} />;
|
||||
},
|
||||
[
|
||||
wallet,
|
||||
walletID,
|
||||
saveToDisk,
|
||||
isBiometricUseCapableAndEnabled,
|
||||
navigateToViewEditCosigners,
|
||||
onManageFundsPressed,
|
||||
navigate,
|
||||
colors.background,
|
||||
stylesHook.listHeaderText,
|
||||
hasNoTransactions,
|
||||
isLightning,
|
||||
],
|
||||
[wallet, walletID],
|
||||
);
|
||||
|
||||
const choosePhoto = () => {
|
||||
|
|
@ -493,20 +396,96 @@ const WalletTransactions: React.FC<WalletTransactionsProps> = ({ route }) => {
|
|||
const offsetY = event.nativeEvent.contentOffset.y;
|
||||
const combinedHeight = 180;
|
||||
if (offsetY < combinedHeight) {
|
||||
if (!headerVisible) {
|
||||
setHeaderVisible(true);
|
||||
setOptions({ ...getWalletTransactionsOptions({ route }), headerTitle: undefined });
|
||||
}
|
||||
setOptions({ ...getWalletTransactionsOptions({ route }), headerTitle: undefined });
|
||||
} else {
|
||||
if (headerVisible) {
|
||||
setHeaderVisible(false);
|
||||
navigation.setOptions({
|
||||
headerTitle: wallet ? `${wallet.getLabel()} ${walletBalance}` : '',
|
||||
});
|
||||
}
|
||||
navigation.setOptions({
|
||||
headerTitle: wallet ? `${wallet.getLabel()} ${walletBalance}` : '',
|
||||
});
|
||||
}
|
||||
},
|
||||
[headerVisible, navigation, wallet, walletBalance, setOptions, route],
|
||||
[navigation, wallet, walletBalance, setOptions, route],
|
||||
);
|
||||
|
||||
const hasNoTransactions = useMemo(() => getTransactions(1).length === 0, [getTransactions]);
|
||||
|
||||
const ListHeaderComponent = useCallback(
|
||||
() =>
|
||||
wallet ? (
|
||||
<>
|
||||
<TransactionsNavigationHeader
|
||||
wallet={wallet}
|
||||
onWalletUnitChange={async selectedUnit => {
|
||||
wallet.preferredBalanceUnit = selectedUnit;
|
||||
await saveToDisk();
|
||||
}}
|
||||
unit={wallet.preferredBalanceUnit}
|
||||
onWalletBalanceVisibilityChange={async isShouldBeVisible => {
|
||||
const isBiometricsEnabled = await isBiometricUseCapableAndEnabled();
|
||||
if (wallet.hideBalance && isBiometricsEnabled) {
|
||||
const unlocked = await unlockWithBiometrics();
|
||||
if (!unlocked) throw new Error('Biometrics failed');
|
||||
}
|
||||
wallet.hideBalance = isShouldBeVisible;
|
||||
await saveToDisk();
|
||||
}}
|
||||
onManageFundsPressed={id => {
|
||||
if (wallet.type === MultisigHDWallet.type) {
|
||||
navigateToViewEditCosigners();
|
||||
} else if (wallet.type === LightningCustodianWallet.type) {
|
||||
if (wallet.getUserHasSavedExport()) {
|
||||
if (!id) return;
|
||||
onManageFundsPressed(id);
|
||||
} else {
|
||||
presentWalletExportReminder()
|
||||
.then(async () => {
|
||||
if (!id) return;
|
||||
wallet.setUserHasSavedExport(true);
|
||||
await saveToDisk();
|
||||
onManageFundsPressed(id);
|
||||
})
|
||||
.catch(() => {
|
||||
navigate('WalletExportRoot', {
|
||||
screen: 'WalletExport',
|
||||
params: {
|
||||
walletID,
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<>
|
||||
<View style={[styles.flex, { backgroundColor: colors.background }]}>
|
||||
<View style={styles.listHeaderTextRow}>
|
||||
<Text style={[styles.listHeaderText, stylesHook.listHeaderText]}>{loc.transactions.list_title}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ backgroundColor: colors.background }}>
|
||||
{wallet.type === WatchOnlyWallet.type && wallet.isWatchOnlyWarningVisible && (
|
||||
<WatchOnlyWarning
|
||||
handleDismiss={() => {
|
||||
wallet.isWatchOnlyWarningVisible = false;
|
||||
LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
|
||||
saveToDisk();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</>
|
||||
</>
|
||||
) : undefined,
|
||||
[
|
||||
wallet,
|
||||
colors.background,
|
||||
stylesHook.listHeaderText,
|
||||
saveToDisk,
|
||||
isBiometricUseCapableAndEnabled,
|
||||
navigateToViewEditCosigners,
|
||||
onManageFundsPressed,
|
||||
navigate,
|
||||
walletID,
|
||||
],
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
@ -519,7 +498,7 @@ const WalletTransactions: React.FC<WalletTransactionsProps> = ({ route }) => {
|
|||
]}
|
||||
/>
|
||||
|
||||
<FlatList<TransactionListItem | { type: 'navHeader' } | { type: 'listHeader' }>
|
||||
<FlatList<Transaction>
|
||||
getItemLayout={getItemLayout}
|
||||
updateCellsBatchingPeriod={30}
|
||||
onEndReachedThreshold={0.3}
|
||||
|
|
@ -535,10 +514,20 @@ const WalletTransactions: React.FC<WalletTransactionsProps> = ({ route }) => {
|
|||
contentContainerStyle={{ backgroundColor: colors.background }}
|
||||
contentInset={{ top: 0, left: 0, bottom: 90, right: 0 }}
|
||||
maxToRenderPerBatch={15}
|
||||
stickyHeaderIndices={[1]}
|
||||
onScroll={handleScroll}
|
||||
scrollEventThrottle={16}
|
||||
stickyHeaderHiddenOnScroll
|
||||
ListHeaderComponent={ListHeaderComponent}
|
||||
ListEmptyComponent={
|
||||
hasNoTransactions ? (
|
||||
<ScrollView style={[styles.flex, { backgroundColor: colors.background }]} contentContainerStyle={styles.scrollViewContent}>
|
||||
<Text numberOfLines={0} style={styles.emptyTxs}>
|
||||
{(isLightning() && loc.wallets.list_empty_txs1_lightning) || loc.wallets.list_empty_txs1}
|
||||
</Text>
|
||||
{isLightning() && <Text style={styles.emptyTxsLightning}>{loc.wallets.list_empty_txs2_lightning}</Text>}
|
||||
</ScrollView>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
<FContainer ref={walletActionButtonsRef}>
|
||||
{wallet?.allowReceive() && (
|
||||
|
|
@ -597,7 +586,7 @@ const styles = StyleSheet.create({
|
|||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: 160,
|
||||
height: 400,
|
||||
},
|
||||
emptyTxs: { fontSize: 18, color: '#9aa0aa', textAlign: 'center', marginVertical: 16 },
|
||||
emptyTxsLightning: { fontSize: 18, color: '#9aa0aa', textAlign: 'center', fontWeight: '600' },
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue