mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2025-01-19 05:45:15 +01:00
REF: WalletsList useCallback
This commit is contained in:
Marcos Rodriguez Velez
parent
e363cb5114
commit
da2b3c7739
@ -151,69 +151,75 @@ const WalletsList: React.FC = () => {
|
||||
walletsCount.current = wallets.length;
|
||||
}, [wallets]);
|
||||
|
||||
const verifyBalance = () => {
|
||||
const verifyBalance = useCallback(() => {
|
||||
if (getBalance() !== 0) {
|
||||
A(A.ENUM.GOT_NONZERO_BALANCE);
|
||||
} else {
|
||||
A(A.ENUM.GOT_ZERO_BALANCE);
|
||||
}
|
||||
};
|
||||
}, [getBalance]);
|
||||
|
||||
/**
|
||||
* Forcefully fetches TXs and balance for ALL wallets.
|
||||
* Triggered manually by user on pull-to-refresh.
|
||||
*/
|
||||
const refreshTransactions = async (showLoadingIndicator = true, showUpdateStatusIndicator = false) => {
|
||||
if (isElectrumDisabled) {
|
||||
dispatch({ type: ActionTypes.SET_LOADING, payload: false });
|
||||
return;
|
||||
}
|
||||
dispatch({ type: ActionTypes.SET_LOADING, payload: showLoadingIndicator });
|
||||
refreshAllWalletTransactions(undefined, showUpdateStatusIndicator).finally(() => {
|
||||
dispatch({ type: ActionTypes.SET_LOADING, payload: false });
|
||||
});
|
||||
};
|
||||
const refreshTransactions = useCallback(
|
||||
async (showLoadingIndicator = true, showUpdateStatusIndicator = false) => {
|
||||
if (isElectrumDisabled) {
|
||||
dispatch({ type: ActionTypes.SET_LOADING, payload: false });
|
||||
return;
|
||||
}
|
||||
dispatch({ type: ActionTypes.SET_LOADING, payload: showLoadingIndicator });
|
||||
refreshAllWalletTransactions(undefined, showUpdateStatusIndicator).finally(() => {
|
||||
dispatch({ type: ActionTypes.SET_LOADING, payload: false });
|
||||
});
|
||||
},
|
||||
[isElectrumDisabled, refreshAllWalletTransactions],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
refreshTransactions(false, true);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []); // call refreshTransactions() only once, when screen mounts
|
||||
}, []);
|
||||
|
||||
const handleClick = (item?: TWallet) => {
|
||||
if (item?.getID) {
|
||||
const walletID = item.getID();
|
||||
navigate('WalletTransactions', {
|
||||
walletID,
|
||||
walletType: item.type,
|
||||
});
|
||||
} else {
|
||||
navigate('AddWalletRoot');
|
||||
}
|
||||
};
|
||||
|
||||
const setIsLoading = (value: boolean) => {
|
||||
dispatch({ type: ActionTypes.SET_LOADING, payload: value });
|
||||
};
|
||||
|
||||
const onSnapToItem = (e: { nativeEvent: { contentOffset: any } }) => {
|
||||
if (!isFocused) return;
|
||||
|
||||
const contentOffset = e.nativeEvent.contentOffset;
|
||||
const index = Math.ceil(contentOffset.x / width);
|
||||
|
||||
if (currentWalletIndex.current !== index) {
|
||||
console.log('onSnapToItem', wallets.length === index ? 'NewWallet/Importing card' : index);
|
||||
if (wallets[index] && (wallets[index].timeToRefreshBalance() || wallets[index].timeToRefreshTransaction())) {
|
||||
console.log(wallets[index].getLabel(), 'thinks its time to refresh either balance or transactions. refetching both');
|
||||
refreshAllWalletTransactions(index, false).finally(() => setIsLoading(false));
|
||||
const handleClick = useCallback(
|
||||
(item?: TWallet) => {
|
||||
if (item?.getID) {
|
||||
const walletID = item.getID();
|
||||
navigate('WalletTransactions', {
|
||||
walletID,
|
||||
walletType: item.type,
|
||||
});
|
||||
} else {
|
||||
navigate('AddWalletRoot');
|
||||
}
|
||||
currentWalletIndex.current = index;
|
||||
} else {
|
||||
console.log('onSnapToItem did not change. Most likely momentum stopped at the same index it started.');
|
||||
}
|
||||
};
|
||||
},
|
||||
[navigate],
|
||||
);
|
||||
|
||||
const renderListHeaderComponent = () => {
|
||||
const setIsLoading = useCallback((value: boolean) => {
|
||||
dispatch({ type: ActionTypes.SET_LOADING, payload: value });
|
||||
}, []);
|
||||
|
||||
const onSnapToItem = useCallback(
|
||||
(e: { nativeEvent: { contentOffset: any } }) => {
|
||||
if (!isFocused) return;
|
||||
|
||||
const contentOffset = e.nativeEvent.contentOffset;
|
||||
const index = Math.ceil(contentOffset.x / width);
|
||||
|
||||
if (currentWalletIndex.current !== index) {
|
||||
console.debug('onSnapToItem', wallets.length === index ? 'NewWallet/Importing card' : index);
|
||||
if (wallets[index] && (wallets[index].timeToRefreshBalance() || wallets[index].timeToRefreshTransaction())) {
|
||||
refreshAllWalletTransactions(index, false).finally(() => setIsLoading(false));
|
||||
}
|
||||
currentWalletIndex.current = index;
|
||||
}
|
||||
},
|
||||
[isFocused, refreshAllWalletTransactions, setIsLoading, wallets, width],
|
||||
);
|
||||
|
||||
const renderListHeaderComponent = useCallback(() => {
|
||||
return (
|
||||
<View style={[styles.listHeaderBack, stylesHook.listHeaderBack]}>
|
||||
<Text textBreakStrategy="simple" style={[styles.listHeaderText, stylesHook.listHeaderText]}>
|
||||
@ -221,28 +227,29 @@ const WalletsList: React.FC = () => {
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
}, [stylesHook.listHeaderBack, stylesHook.listHeaderText]);
|
||||
|
||||
const handleLongPress = () => {
|
||||
const handleLongPress = useCallback(() => {
|
||||
if (wallets.length > 1) {
|
||||
navigate('ReorderWallets');
|
||||
} else {
|
||||
triggerHapticFeedback(HapticFeedbackTypes.NotificationError);
|
||||
}
|
||||
};
|
||||
}, [navigate, wallets.length]);
|
||||
|
||||
const renderTransactionListsRow = (item: ExtendedTransaction) => {
|
||||
return (
|
||||
const renderTransactionListsRow = useCallback(
|
||||
(item: ExtendedTransaction) => (
|
||||
<View style={styles.transaction}>
|
||||
<TransactionListItem item={item} itemPriceUnit={item.walletPreferredBalanceUnit} walletID={item.walletID} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
),
|
||||
[],
|
||||
);
|
||||
|
||||
const renderWalletsCarousel = () => {
|
||||
const renderWalletsCarousel = useCallback(() => {
|
||||
return (
|
||||
<WalletsCarousel
|
||||
// @ts-ignore: Convert to TS later
|
||||
// @ts-ignore: Fix later
|
||||
data={wallets.concat(false)}
|
||||
extraData={[wallets]}
|
||||
onPress={handleClick}
|
||||
@ -254,49 +261,58 @@ const WalletsList: React.FC = () => {
|
||||
scrollEnabled={isFocused}
|
||||
/>
|
||||
);
|
||||
};
|
||||
}, [handleClick, handleLongPress, isFocused, onSnapToItem, wallets]);
|
||||
|
||||
const renderSectionItem = (item: { section: any; item: ExtendedTransaction }) => {
|
||||
switch (item.section.key) {
|
||||
case WalletsListSections.CAROUSEL:
|
||||
return isLargeScreen ? null : renderWalletsCarousel();
|
||||
case WalletsListSections.TRANSACTIONS:
|
||||
return renderTransactionListsRow(item.item);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const renderSectionHeader = (section: { section: { key: any } }) => {
|
||||
switch (section.section.key) {
|
||||
case WalletsListSections.CAROUSEL:
|
||||
return isLargeScreen ? null : <Header leftText={loc.wallets.list_title} onNewWalletPress={() => navigate('AddWalletRoot')} />;
|
||||
case WalletsListSections.TRANSACTIONS:
|
||||
return renderListHeaderComponent();
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const renderSectionFooter = (section: { section: { key: any } }) => {
|
||||
switch (section.section.key) {
|
||||
case WalletsListSections.TRANSACTIONS:
|
||||
if (dataSource.length === 0 && !isLoading) {
|
||||
return (
|
||||
<View style={styles.footerRoot} testID="NoTransactionsMessage">
|
||||
<Text style={styles.footerEmpty}>{loc.wallets.list_empty_txs1}</Text>
|
||||
<Text style={styles.footerStart}>{loc.wallets.list_empty_txs2}</Text>
|
||||
</View>
|
||||
);
|
||||
} else {
|
||||
const renderSectionItem = useCallback(
|
||||
(item: { section: any; item: ExtendedTransaction }) => {
|
||||
switch (item.section.key) {
|
||||
case WalletsListSections.CAROUSEL:
|
||||
return isLargeScreen ? null : renderWalletsCarousel();
|
||||
case WalletsListSections.TRANSACTIONS:
|
||||
return renderTransactionListsRow(item.item);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
[isLargeScreen, renderTransactionListsRow, renderWalletsCarousel],
|
||||
);
|
||||
|
||||
const renderScanButton = () => {
|
||||
const renderSectionHeader = useCallback(
|
||||
(section: { section: { key: any } }) => {
|
||||
switch (section.section.key) {
|
||||
case WalletsListSections.CAROUSEL:
|
||||
return isLargeScreen ? null : <Header leftText={loc.wallets.list_title} onNewWalletPress={() => navigate('AddWalletRoot')} />;
|
||||
case WalletsListSections.TRANSACTIONS:
|
||||
return renderListHeaderComponent();
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
},
|
||||
[isLargeScreen, navigate, renderListHeaderComponent],
|
||||
);
|
||||
|
||||
const renderSectionFooter = useCallback(
|
||||
(section: { section: { key: any } }) => {
|
||||
switch (section.section.key) {
|
||||
case WalletsListSections.TRANSACTIONS:
|
||||
if (dataSource.length === 0 && !isLoading) {
|
||||
return (
|
||||
<View style={styles.footerRoot} testID="NoTransactionsMessage">
|
||||
<Text style={styles.footerEmpty}>{loc.wallets.list_empty_txs1}</Text>
|
||||
<Text style={styles.footerStart}>{loc.wallets.list_empty_txs2}</Text>
|
||||
</View>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
},
|
||||
[dataSource.length, isLoading],
|
||||
);
|
||||
|
||||
const renderScanButton = useCallback(() => {
|
||||
if (wallets.length > 0) {
|
||||
return (
|
||||
<FContainer ref={walletActionButtonsRef.current}>
|
||||
@ -311,30 +327,35 @@ const WalletsList: React.FC = () => {
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [scanImage, wallets.length]);
|
||||
|
||||
const sectionListKeyExtractor = (item: any, index: any) => {
|
||||
return `${item}${index}}`;
|
||||
};
|
||||
|
||||
const onScanButtonPressed = () => {
|
||||
const onScanButtonPressed = useCallback(() => {
|
||||
scanQrHelper(routeName).then(onBarScanned);
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const onBarScanned = (value: any) => {
|
||||
if (!value) return;
|
||||
DeeplinkSchemaMatch.navigationRouteFor({ url: value }, completionValue => {
|
||||
triggerHapticFeedback(HapticFeedbackTypes.NotificationSuccess);
|
||||
// @ts-ignore: Fix later
|
||||
navigate(...completionValue);
|
||||
});
|
||||
};
|
||||
const onBarScanned = useCallback(
|
||||
(value: any) => {
|
||||
if (!value) return;
|
||||
DeeplinkSchemaMatch.navigationRouteFor({ url: value }, completionValue => {
|
||||
triggerHapticFeedback(HapticFeedbackTypes.NotificationSuccess);
|
||||
// @ts-ignore: for now
|
||||
navigate(...completionValue);
|
||||
});
|
||||
},
|
||||
[navigate],
|
||||
);
|
||||
|
||||
const copyFromClipboard = async () => {
|
||||
const copyFromClipboard = useCallback(async () => {
|
||||
onBarScanned(await BlueClipboard().getClipboardContent());
|
||||
};
|
||||
}, [onBarScanned]);
|
||||
|
||||
const sendButtonLongPress = async () => {
|
||||
const sendButtonLongPress = useCallback(async () => {
|
||||
const isClipboardEmpty = (await BlueClipboard().getClipboardContent()).trim().length === 0;
|
||||
|
||||
const options = [loc._.cancel, loc.wallets.list_long_choose, loc.wallets.list_long_scan];
|
||||
@ -358,7 +379,6 @@ const WalletsList: React.FC = () => {
|
||||
fs.showImagePickerAndReadImage()
|
||||
.then(onBarScanned)
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
triggerHapticFeedback(HapticFeedbackTypes.NotificationError);
|
||||
presentAlert({ title: loc.errors.error, message: error.message });
|
||||
});
|
||||
@ -373,12 +393,13 @@ const WalletsList: React.FC = () => {
|
||||
break;
|
||||
}
|
||||
});
|
||||
};
|
||||
}, [copyFromClipboard, onBarScanned, routeName]);
|
||||
|
||||
const onRefresh = () => {
|
||||
const onRefresh = useCallback(() => {
|
||||
refreshTransactions(true, false);
|
||||
};
|
||||
// Optimized for Mac option doesn't like RN Refresh component. Menu Elements now handles it for macOS
|
||||
// Optimized for Mac option doesn't like RN Refresh component. Menu Elements now handles it for macOS
|
||||
}, [refreshTransactions]);
|
||||
|
||||
const refreshProps = isDesktop || isElectrumDisabled ? {} : { refreshing: isLoading, onRefresh };
|
||||
|
||||
const sections: SectionData[] = [
|
||||
@ -401,6 +422,9 @@ const WalletsList: React.FC = () => {
|
||||
contentInset={styles.scrollContent}
|
||||
renderSectionFooter={renderSectionFooter}
|
||||
sections={sections}
|
||||
windowSize={21}
|
||||
maxToRenderPerBatch={10}
|
||||
updateCellsBatchingPeriod={50}
|
||||
/>
|
||||
{renderScanButton()}
|
||||
</View>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user