mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2025-03-26 08:55:56 +01:00
REF: Remove error-prone random placeholder scroll calculation
This commit is contained in:
Marcos Rodriguez Vélez
GitHub
parent
769e04338f
commit
472f4c214c
7 changed files with 158 additions and 209 deletions
|
|
@ -831,6 +831,7 @@ export const BlueHeaderDefaultSub = props => {
|
|||
export const BlueHeaderDefaultMain = props => {
|
||||
const { colors } = useTheme();
|
||||
const { isDrawerList } = props;
|
||||
const { isImportingWallet } = useContext(BlueStorageContext);
|
||||
return (
|
||||
<Header
|
||||
leftComponent={{
|
||||
|
|
@ -854,7 +855,7 @@ export const BlueHeaderDefaultMain = props => {
|
|||
bottomDivider={false}
|
||||
topDivider={false}
|
||||
backgroundColor={isDrawerList ? colors.elevated : colors.background}
|
||||
rightComponent={<BluePlusIcon onPress={props.onNewWalletPress} Component={TouchableOpacity} />}
|
||||
rightComponent={isImportingWallet ? undefined : <BluePlusIcon onPress={props.onNewWalletPress} Component={TouchableOpacity} />}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export const WalletTransactionsStatus = { NONE: false, ALL: true };
|
|||
export const BlueStorageContext = createContext();
|
||||
export const BlueStorageProvider = ({ children }) => {
|
||||
const [wallets, setWallets] = useState([]);
|
||||
const [pendingWallets, setPendingWallets] = useState([]);
|
||||
const [isImportingWallet, setIsImportingWallet] = useState(false);
|
||||
const [selectedWallet, setSelectedWallet] = useState('');
|
||||
const [walletTransactionUpdateStatus, setWalletTransactionUpdateStatus] = useState(WalletTransactionsStatus.NONE);
|
||||
const [walletsInitialized, setWalletsInitialized] = useState(false);
|
||||
|
|
@ -186,8 +186,8 @@ export const BlueStorageProvider = ({ children }) => {
|
|||
value={{
|
||||
wallets,
|
||||
setWalletsWithNewOrder,
|
||||
pendingWallets,
|
||||
setPendingWallets,
|
||||
isImportingWallet,
|
||||
setIsImportingWallet,
|
||||
txMetadata,
|
||||
saveToDisk,
|
||||
getTransactions,
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@ import {
|
|||
HDLegacyP2PKHWallet,
|
||||
HDSegwitBech32Wallet,
|
||||
LightningCustodianWallet,
|
||||
PlaceholderWallet,
|
||||
SegwitBech32Wallet,
|
||||
HDLegacyElectrumSeedP2PKHWallet,
|
||||
HDSegwitElectrumSeedP2WPKHWallet,
|
||||
HDAezeedWallet,
|
||||
MultisigHDWallet,
|
||||
SLIP39LegacyP2PKHWallet,
|
||||
PlaceholderWallet,
|
||||
SLIP39SegwitP2SHWallet,
|
||||
SLIP39SegwitBech32Wallet,
|
||||
} from '.';
|
||||
|
|
@ -30,7 +30,7 @@ const wif = require('wif');
|
|||
const prompt = require('../blue_modules/prompt');
|
||||
|
||||
function WalletImport() {
|
||||
const { wallets, pendingWallets, setPendingWallets, saveToDisk, addWallet } = useContext(BlueStorageContext);
|
||||
const { wallets, saveToDisk, addWallet, setIsImportingWallet } = useContext(BlueStorageContext);
|
||||
|
||||
/**
|
||||
*
|
||||
|
|
@ -55,15 +55,21 @@ function WalletImport() {
|
|||
Notifications.majorTomToGroundControl(w.getAllExternalAddresses(), [], []);
|
||||
};
|
||||
|
||||
WalletImport.removePlaceholderWallet = () => {
|
||||
setPendingWallets([]);
|
||||
WalletImport.isWalletImported = w => {
|
||||
const wallet = wallets.some(wallet => wallet.getSecret() === w.secret || wallet.getID() === w.getID());
|
||||
return !!wallet;
|
||||
};
|
||||
|
||||
WalletImport.isWalletImported = w => {
|
||||
const wallet = wallets.some(
|
||||
wallet => (wallet.getSecret() === w.secret || wallet.getID() === w.getID()) && wallet.type !== PlaceholderWallet.type,
|
||||
);
|
||||
return !!wallet;
|
||||
WalletImport.removePlaceholderWallet = ()=> {
|
||||
setIsImportingWallet(false)
|
||||
}
|
||||
|
||||
|
||||
WalletImport.addPlaceholderWallet = (importText, isFailure = false) => {
|
||||
const placeholderWallet = new PlaceholderWallet();
|
||||
placeholderWallet.setSecret(importText);
|
||||
placeholderWallet.setIsFailure(isFailure);
|
||||
setIsImportingWallet(placeholderWallet);
|
||||
};
|
||||
|
||||
WalletImport.presentWalletAlreadyExistsAlert = () => {
|
||||
|
|
@ -71,18 +77,6 @@ function WalletImport() {
|
|||
alert('This wallet has been previously imported.');
|
||||
};
|
||||
|
||||
WalletImport.addPlaceholderWallet = (importText, isFailure = false) => {
|
||||
const wallet = new PlaceholderWallet();
|
||||
wallet.setSecret(importText);
|
||||
wallet.setIsFailure(isFailure);
|
||||
setPendingWallets([...pendingWallets, wallet]);
|
||||
return wallet;
|
||||
};
|
||||
|
||||
WalletImport.isCurrentlyImportingWallet = () => {
|
||||
return wallets.some(wallet => wallet.type === PlaceholderWallet.type);
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
* @param importText
|
||||
|
|
|
|||
|
|
@ -52,6 +52,43 @@ const nStyles = StyleSheet.create({
|
|||
},
|
||||
});
|
||||
|
||||
const PlaceholderWalletCarouselItem = props => {
|
||||
const { colors } = useTheme();
|
||||
|
||||
const { isImportingWallet } = useContext(BlueStorageContext);
|
||||
|
||||
return (
|
||||
<TouchableWithoutFeedback
|
||||
onPressIn={() => {
|
||||
if (isImportingWallet && isImportingWallet.getIsFailure()) {
|
||||
props.onPressedIn();
|
||||
} else {
|
||||
props.onPressedOut();
|
||||
}
|
||||
}}
|
||||
onPressOut={isImportingWallet && isImportingWallet.getIsFailure() ? props.onPressedOut : null}
|
||||
onPress={isImportingWallet && isImportingWallet.getIsFailure() ? props.onPress : null}
|
||||
>
|
||||
<LinearGradient shadowColor={colors.shadowColor} colors={WalletGradient.gradientsFor(PlaceholderWallet.type)} style={iStyles.grad}>
|
||||
<Image source={I18nManager.isRTL ? require('../img/btc-shape-rtl.png') : require('../img/btc-shape.png')} style={iStyles.image} />
|
||||
<Text style={iStyles.br} />
|
||||
<Text numberOfLines={1} style={[iStyles.label, { color: colors.inverseForegroundColor }]}>
|
||||
{isImportingWallet.getIsFailure() ? loc.wallets.import_placeholder_fail : loc.wallets.import_placeholder_inprogress}
|
||||
</Text>
|
||||
{isImportingWallet.getIsFailure() ? (
|
||||
<Text testID="ImportError" numberOfLines={0} style={[iStyles.importError, { color: colors.inverseForegroundColor }]}>
|
||||
{loc.wallets.list_import_error}
|
||||
</Text>
|
||||
) : (
|
||||
<ActivityIndicator style={iStyles.activity} />
|
||||
)}
|
||||
</LinearGradient>
|
||||
</TouchableWithoutFeedback>
|
||||
);
|
||||
};
|
||||
|
||||
PlaceholderWalletCarouselItem.propTypes = { onPress: PropTypes.func, onPressedOut: PropTypes.func, onPressedIn: PropTypes.func };
|
||||
|
||||
const NewWalletPanel = ({ onPress }) => {
|
||||
const { colors } = useTheme();
|
||||
const { width } = useWindowDimensions();
|
||||
|
|
@ -149,7 +186,7 @@ const iStyles = StyleSheet.create({
|
|||
const WalletCarouselItem = ({ item, index, onPress, handleLongPress, isSelectedWallet }) => {
|
||||
const scaleValue = new Animated.Value(1.0);
|
||||
const { colors } = useTheme();
|
||||
const { walletTransactionUpdateStatus } = useContext(BlueStorageContext);
|
||||
const { walletTransactionUpdateStatus, isImportingWallet } = useContext(BlueStorageContext);
|
||||
const { width } = useWindowDimensions();
|
||||
const itemWidth = width * 0.82 > 375 ? 375 : width * 0.82;
|
||||
const isLargeScreen = Platform.OS === 'android' ? isTablet() : width >= Dimensions.get('screen').width / 2 && (isTablet() || isDesktop);
|
||||
|
|
@ -168,7 +205,16 @@ const WalletCarouselItem = ({ item, index, onPress, handleLongPress, isSelectedW
|
|||
};
|
||||
|
||||
if (!item)
|
||||
return (
|
||||
return isImportingWallet ? (
|
||||
<Animated.View
|
||||
style={[isLargeScreen ? iStyles.rootLargeDevice : { ...iStyles.root, width: itemWidth }, { transform: [{ scale: scaleValue }] }]}
|
||||
shadowOpacity={25 / 100}
|
||||
shadowOffset={{ width: 0, height: 3 }}
|
||||
shadowRadius={8}
|
||||
>
|
||||
<PlaceholderWalletCarouselItem onPress={onPress} index={index} onPressedIn={onPressedIn} onPressedOut={onPressedOut} />
|
||||
</Animated.View>
|
||||
) : (
|
||||
<NewWalletPanel
|
||||
onPress={() => {
|
||||
onPressedOut();
|
||||
|
|
@ -177,47 +223,6 @@ const WalletCarouselItem = ({ item, index, onPress, handleLongPress, isSelectedW
|
|||
/>
|
||||
);
|
||||
|
||||
if (item.type === PlaceholderWallet.type) {
|
||||
return (
|
||||
<Animated.View
|
||||
style={[isLargeScreen ? iStyles.rootLargeDevice : { ...iStyles.root, width: itemWidth }, { transform: [{ scale: scaleValue }] }]}
|
||||
shadowOpacity={40 / 100}
|
||||
shadowOffset={{ width: 0, height: 0 }}
|
||||
shadowRadius={5}
|
||||
>
|
||||
<TouchableWithoutFeedback
|
||||
onPressIn={item.getIsFailure() ? onPressedIn : null}
|
||||
onPressOut={item.getIsFailure() ? onPressedOut : null}
|
||||
onPress={() => {
|
||||
if (item.getIsFailure()) {
|
||||
onPressedOut();
|
||||
onPress(index);
|
||||
onPressedOut();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<LinearGradient shadowColor={colors.shadowColor} colors={WalletGradient.gradientsFor(item.type)} style={iStyles.grad}>
|
||||
<Image
|
||||
source={I18nManager.isRTL ? require('../img/btc-shape-rtl.png') : require('../img/btc-shape.png')}
|
||||
style={iStyles.image}
|
||||
/>
|
||||
<Text style={iStyles.br} />
|
||||
<Text numberOfLines={1} style={[iStyles.label, { color: colors.inverseForegroundColor }]}>
|
||||
{item.getIsFailure() ? loc.wallets.import_placeholder_fail : loc.wallets.import_placeholder_inprogress}
|
||||
</Text>
|
||||
{item.getIsFailure() ? (
|
||||
<Text testID="ImportError" numberOfLines={0} style={[iStyles.importError, { color: colors.inverseForegroundColor }]}>
|
||||
{loc.wallets.list_import_error}
|
||||
</Text>
|
||||
) : (
|
||||
<ActivityIndicator style={iStyles.activity} />
|
||||
)}
|
||||
</LinearGradient>
|
||||
</TouchableWithoutFeedback>
|
||||
</Animated.View>
|
||||
);
|
||||
}
|
||||
|
||||
const opacity = isSelectedWallet === false ? 0.5 : 1.0;
|
||||
let image;
|
||||
switch (item.type) {
|
||||
|
|
@ -318,11 +323,11 @@ const cStyles = StyleSheet.create({
|
|||
});
|
||||
|
||||
const WalletsCarousel = forwardRef((props, ref) => {
|
||||
const { preferredFiatCurrency, language } = useContext(BlueStorageContext);
|
||||
const { preferredFiatCurrency, language, isImportingWallet } = useContext(BlueStorageContext);
|
||||
const renderItem = useCallback(
|
||||
({ item, index }) => (
|
||||
<WalletCarouselItem
|
||||
isSelectedWallet={props.vertical && props.selectedWallet && item ? props.selectedWallet === item.getID() : undefined}
|
||||
isSelectedWallet={!props.horizontal && props.selectedWallet && item ? props.selectedWallet === item.getID() : undefined}
|
||||
item={item}
|
||||
index={index}
|
||||
handleLongPress={props.handleLongPress}
|
||||
|
|
@ -330,7 +335,7 @@ const WalletsCarousel = forwardRef((props, ref) => {
|
|||
/>
|
||||
),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[props.vertical, props.selectedWallet, props.handleLongPress, props.onPress, preferredFiatCurrency, language],
|
||||
[props.horizontal, props.selectedWallet, props.handleLongPress, props.onPress, preferredFiatCurrency, language, isImportingWallet],
|
||||
);
|
||||
const flatListRef = useRef();
|
||||
const ListHeaderComponent = () => <View style={cStyles.separatorStyle} />;
|
||||
|
|
@ -338,12 +343,12 @@ const WalletsCarousel = forwardRef((props, ref) => {
|
|||
useImperativeHandle(ref, () => ({
|
||||
scrollToItem: ({ item }) => {
|
||||
setTimeout(() => {
|
||||
flatListRef?.current?.scrollToItem({ item, viewPosition: 0.3 });
|
||||
flatListRef?.current?.scrollToItem({ item, viewOffset: 16 });
|
||||
}, 300);
|
||||
},
|
||||
scrollToIndex: index => {
|
||||
scrollToIndex: ({ index }) => {
|
||||
setTimeout(() => {
|
||||
flatListRef?.current?.scrollToIndex({ index, viewPosition: 0.3 });
|
||||
flatListRef?.current?.scrollToIndex({ index, viewOffset: 16 });
|
||||
}, 300);
|
||||
},
|
||||
}));
|
||||
|
|
@ -351,31 +356,30 @@ const WalletsCarousel = forwardRef((props, ref) => {
|
|||
const { width } = useWindowDimensions();
|
||||
const sliderHeight = 190;
|
||||
const itemWidth = width * 0.82 > 375 ? 375 : width * 0.82;
|
||||
const isLargeScreen = Platform.OS === 'android' ? isTablet() : width >= Dimensions.get('screen').width / 2 && (isTablet() || isDesktop);
|
||||
|
||||
return (
|
||||
<FlatList
|
||||
ref={flatListRef}
|
||||
renderItem={renderItem}
|
||||
extraData={renderItem}
|
||||
keyExtractor={(_, index) => index.toString()}
|
||||
showsVerticalScrollIndicator={false}
|
||||
pagingEnabled
|
||||
disableIntervalMomentum={isHandset}
|
||||
snapToInterval={itemWidth} // Adjust to your content width
|
||||
decelerationRate="fast"
|
||||
contentContainerStyle={isLargeScreen ? cStyles.contentLargeScreen : cStyles.content}
|
||||
contentContainerStyle={props.horizontal ? cStyles.content : cStyles.contentLargeScreen}
|
||||
directionalLockEnabled
|
||||
showsHorizontalScrollIndicator={false}
|
||||
initialNumToRender={10}
|
||||
ListHeaderComponent={ListHeaderComponent}
|
||||
style={props.vertical ? {} : { height: sliderHeight + 9 }}
|
||||
style={props.horizontal ? { height: sliderHeight + 9 } : {}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
WalletsCarousel.propTypes = {
|
||||
vertical: PropTypes.bool,
|
||||
horizontal: PropTypes.bool,
|
||||
selectedWallet: PropTypes.string,
|
||||
onPress: PropTypes.func.isRequired,
|
||||
handleLongPress: PropTypes.func.isRequired,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useContext, useEffect, useRef, useState } from 'react';
|
||||
import { StatusBar, View, StyleSheet, Alert } from 'react-native';
|
||||
import React, { useContext, useEffect, useRef } from 'react';
|
||||
import { StatusBar, View, StyleSheet } from 'react-native';
|
||||
import { DrawerContentScrollView } from '@react-navigation/drawer';
|
||||
import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
|
||||
import PropTypes from 'prop-types';
|
||||
|
|
@ -7,8 +7,6 @@ import { useIsFocused, useTheme } from '@react-navigation/native';
|
|||
|
||||
import { BlueHeaderDefaultMain, BlueSpacing20 } from '../../BlueComponents';
|
||||
import WalletsCarousel from '../../components/WalletsCarousel';
|
||||
import { PlaceholderWallet } from '../../class';
|
||||
import WalletImport from '../../class/wallet-import';
|
||||
import loc from '../../loc';
|
||||
import { BlueStorageContext } from '../../blue_modules/storage-context';
|
||||
import { BlurView } from '@react-native-community/blur';
|
||||
|
|
@ -16,8 +14,7 @@ import { BlurView } from '@react-native-community/blur';
|
|||
const DrawerList = props => {
|
||||
console.log('drawerList rendering...');
|
||||
const walletsCarousel = useRef();
|
||||
const { wallets, selectedWallet, pendingWallets, isDrawerListBlurred } = useContext(BlueStorageContext);
|
||||
const [carouselData, setCarouselData] = useState([]);
|
||||
const { wallets, selectedWallet, isImportingWallet, isDrawerListBlurred } = useContext(BlueStorageContext);
|
||||
const { colors } = useTheme();
|
||||
const walletsCount = useRef(wallets.length);
|
||||
const isFocused = useIsFocused();
|
||||
|
|
@ -27,14 +24,6 @@ const DrawerList = props => {
|
|||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const allWallets = wallets.concat(pendingWallets);
|
||||
setCarouselData(allWallets.concat(false));
|
||||
const newCarouselData = allWallets.concat(false);
|
||||
setCarouselData(newCarouselData);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [wallets, pendingWallets]);
|
||||
|
||||
useEffect(() => {
|
||||
if (walletsCount.current < wallets.length) {
|
||||
walletsCarousel.current?.scrollToItem({ item: wallets[walletsCount.current] });
|
||||
|
|
@ -43,56 +32,29 @@ const DrawerList = props => {
|
|||
}, [wallets]);
|
||||
|
||||
useEffect(() => {
|
||||
if (pendingWallets.length > 0) {
|
||||
walletsCarousel.current?.scrollToItem(carouselData.length - pendingWallets.length);
|
||||
if (isImportingWallet) {
|
||||
walletsCarousel.current?.scrollToItem({ item: false });
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [pendingWallets]);
|
||||
}, [isImportingWallet]);
|
||||
|
||||
const handleClick = index => {
|
||||
console.log('click', index);
|
||||
const wallet = carouselData[index];
|
||||
if (wallet) {
|
||||
if (wallet.type === PlaceholderWallet.type) {
|
||||
Alert.alert(
|
||||
loc.wallets.add_details,
|
||||
loc.wallets.list_import_problem,
|
||||
[
|
||||
{
|
||||
text: loc.wallets.details_delete,
|
||||
onPress: () => {
|
||||
WalletImport.removePlaceholderWallet();
|
||||
},
|
||||
style: 'destructive',
|
||||
},
|
||||
{
|
||||
text: loc.wallets.list_tryagain,
|
||||
onPress: () => {
|
||||
props.navigation.navigate('AddWalletRoot', { screen: 'ImportWallet', params: { label: wallet.getSecret() } });
|
||||
WalletImport.removePlaceholderWallet();
|
||||
},
|
||||
style: 'default',
|
||||
},
|
||||
],
|
||||
{ cancelable: false },
|
||||
);
|
||||
} else {
|
||||
props.navigation.navigate('WalletTransactions', {
|
||||
walletID: wallet.getID(),
|
||||
walletType: wallet.type,
|
||||
key: `WalletTransactions-${wallet.getID()}`,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// if its out of index - this must be last card with incentive to create wallet
|
||||
if (!carouselData.some(wallet => wallet.type === PlaceholderWallet.type)) {
|
||||
props.navigation.navigate('Navigation', { screen: 'AddWalletRoot' });
|
||||
}
|
||||
if (index <= wallets.length - 1) {
|
||||
const wallet = wallets[index];
|
||||
const walletID = wallet.getID();
|
||||
props.navigation.navigate('WalletTransactions', {
|
||||
walletID: wallet.getID(),
|
||||
walletType: wallet.type,
|
||||
key: `WalletTransactions-${walletID}`,
|
||||
});
|
||||
} else if (index >= wallets.length && !isImportingWallet) {
|
||||
props.navigation.navigate('Navigation', { screen: 'AddWalletRoot' });
|
||||
}
|
||||
};
|
||||
|
||||
const handleLongPress = () => {
|
||||
if (carouselData.length > 1 && !carouselData.some(wallet => wallet.type === PlaceholderWallet.type)) {
|
||||
if (wallets.length > 1 && !isImportingWallet) {
|
||||
props.navigation.navigate('ReorderWallets');
|
||||
} else {
|
||||
ReactNativeHapticFeedback.trigger('notificationError', { ignoreAndroidSystemSettings: false });
|
||||
|
|
@ -100,7 +62,7 @@ const DrawerList = props => {
|
|||
};
|
||||
|
||||
const onNewWalletPress = () => {
|
||||
return !carouselData.some(wallet => wallet.type === PlaceholderWallet.type) ? props.navigation.navigate('AddWalletRoot') : null;
|
||||
return !isImportingWallet ? props.navigation.navigate('AddWalletRoot') : null;
|
||||
};
|
||||
|
||||
const ListHeaderComponent = () => {
|
||||
|
|
@ -114,13 +76,12 @@ const DrawerList = props => {
|
|||
|
||||
const renderWalletsCarousel = (
|
||||
<WalletsCarousel
|
||||
data={carouselData}
|
||||
extraData={carouselData}
|
||||
data={wallets.concat(false)}
|
||||
extraData={[wallets, isImportingWallet]}
|
||||
onPress={handleClick}
|
||||
handleLongPress={handleLongPress}
|
||||
ref={walletsCarousel}
|
||||
testID="WalletsList"
|
||||
vertical
|
||||
selectedWallet={selectedWallet}
|
||||
ListHeaderComponent={ListHeaderComponent}
|
||||
scrollEnabled={isFocused}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* global alert */
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Platform, View, Keyboard, StatusBar, StyleSheet } from 'react-native';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { Platform, View, Keyboard, StatusBar, StyleSheet, Alert } from 'react-native';
|
||||
import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
|
||||
import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
|
||||
import {
|
||||
|
|
@ -17,11 +16,14 @@ import Privacy from '../../blue_modules/Privacy';
|
|||
import WalletImport from '../../class/wallet-import';
|
||||
import loc from '../../loc';
|
||||
import { isDesktop, isMacCatalina } from '../../blue_modules/environment';
|
||||
import { BlueStorageContext } from '../../blue_modules/storage-context';
|
||||
|
||||
const fs = require('../../blue_modules/fs');
|
||||
|
||||
const WalletsImport = () => {
|
||||
const [isToolbarVisibleForAndroid, setIsToolbarVisibleForAndroid] = useState(false);
|
||||
const route = useRoute();
|
||||
const { isImportingWallet } = useContext(BlueStorageContext);
|
||||
const label = (route.params && route.params.label) || '';
|
||||
const triggerImport = (route.params && route.params.triggerImport) || false;
|
||||
const [importText, setImportText] = useState(label);
|
||||
|
|
@ -67,9 +69,10 @@ const WalletsImport = () => {
|
|||
* @param importText
|
||||
*/
|
||||
const importMnemonic = async importText => {
|
||||
if (WalletImport.isCurrentlyImportingWallet()) {
|
||||
if (isImportingWallet && isImportingWallet.isFailure === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
WalletImport.addPlaceholderWallet(importText);
|
||||
navigation.dangerouslyGetParent().pop();
|
||||
await new Promise(resolve => setTimeout(resolve, 500)); // giving some time to animations
|
||||
|
|
@ -77,11 +80,30 @@ const WalletsImport = () => {
|
|||
await WalletImport.processImportText(importText);
|
||||
WalletImport.removePlaceholderWallet();
|
||||
} catch (error) {
|
||||
WalletImport.removePlaceholderWallet();
|
||||
WalletImport.addPlaceholderWallet(importText, true);
|
||||
console.log(error);
|
||||
alert(loc.wallets.import_error);
|
||||
ReactNativeHapticFeedback.trigger('notificationError', { ignoreAndroidSystemSettings: false });
|
||||
Alert.alert(
|
||||
loc.wallets.add_details,
|
||||
loc.wallets.list_import_problem,
|
||||
[
|
||||
{
|
||||
text: loc.wallets.list_tryagain,
|
||||
onPress: () => {
|
||||
navigation.navigate('AddWalletRoot', { screen: 'ImportWallet', params: { label: importText } });
|
||||
WalletImport.removePlaceholderWallet();
|
||||
},
|
||||
style: 'default',
|
||||
},
|
||||
{
|
||||
text: loc._.cancel,
|
||||
onPress: () => {
|
||||
WalletImport.removePlaceholderWallet();
|
||||
},
|
||||
style: 'cancel',
|
||||
},
|
||||
],
|
||||
{ cancelable: false },
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import {
|
|||
Text,
|
||||
StyleSheet,
|
||||
SectionList,
|
||||
Alert,
|
||||
Platform,
|
||||
Image,
|
||||
Dimensions,
|
||||
|
|
@ -21,8 +20,6 @@ import WalletsCarousel from '../../components/WalletsCarousel';
|
|||
import { Icon } from 'react-native-elements';
|
||||
import DeeplinkSchemaMatch from '../../class/deeplink-schema-match';
|
||||
import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
|
||||
import { PlaceholderWallet } from '../../class';
|
||||
import WalletImport from '../../class/wallet-import';
|
||||
import ActionSheet from '../ActionSheet';
|
||||
import loc from '../../loc';
|
||||
import { FContainer, FButton } from '../../components/FloatButtons';
|
||||
|
|
@ -39,8 +36,9 @@ const WalletsListSections = { CAROUSEL: 'CAROUSEL', LOCALTRADER: 'LOCALTRADER',
|
|||
|
||||
const WalletsList = () => {
|
||||
const walletsCarousel = useRef();
|
||||
const currentWalletIndex = useRef(0);
|
||||
const colorScheme = useColorScheme();
|
||||
const { wallets, pendingWallets, getTransactions, getBalance, refreshAllWalletTransactions, setSelectedWallet } = useContext(
|
||||
const { wallets, getTransactions, isImportingWallet, getBalance, refreshAllWalletTransactions, setSelectedWallet } = useContext(
|
||||
BlueStorageContext,
|
||||
);
|
||||
const { width } = useWindowDimensions();
|
||||
|
|
@ -52,7 +50,6 @@ const WalletsList = () => {
|
|||
const [isLargeScreen, setIsLargeScreen] = useState(
|
||||
Platform.OS === 'android' ? isTablet() : width >= Dimensions.get('screen').width / 2 && (isTablet() || isDesktop),
|
||||
);
|
||||
const [carouselData, setCarouselData] = useState([]);
|
||||
const dataSource = getTransactions(null, 10);
|
||||
const walletsCount = useRef(wallets.length);
|
||||
const walletActionButtonsRef = useRef();
|
||||
|
|
@ -87,13 +84,6 @@ const WalletsList = () => {
|
|||
}, []),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const allWallets = wallets.concat(pendingWallets);
|
||||
const newCarouselData = allWallets.concat(false);
|
||||
setCarouselData(newCarouselData);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [wallets, pendingWallets]);
|
||||
|
||||
useEffect(() => {
|
||||
if (walletsCount.current < wallets.length) {
|
||||
walletsCarousel.current?.scrollToItem({ item: wallets[walletsCount.current] });
|
||||
|
|
@ -102,11 +92,11 @@ const WalletsList = () => {
|
|||
}, [wallets]);
|
||||
|
||||
useEffect(() => {
|
||||
if (pendingWallets.length > 0) {
|
||||
walletsCarousel.current?.scrollToIndex(carouselData.length - pendingWallets.length);
|
||||
if (isImportingWallet) {
|
||||
walletsCarousel.current?.scrollToItem({ item: false });
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [pendingWallets]);
|
||||
}, [isImportingWallet]);
|
||||
|
||||
const verifyBalance = () => {
|
||||
if (getBalance() !== 0) {
|
||||
|
|
@ -163,41 +153,15 @@ const WalletsList = () => {
|
|||
|
||||
const handleClick = index => {
|
||||
console.log('click', index);
|
||||
const wallet = carouselData[index];
|
||||
if (wallet) {
|
||||
if (wallet.type === PlaceholderWallet.type) {
|
||||
Alert.alert(
|
||||
loc.wallets.add_details,
|
||||
loc.wallets.list_import_problem,
|
||||
[
|
||||
{
|
||||
text: loc.wallets.details_delete,
|
||||
onPress: () => {
|
||||
WalletImport.removePlaceholderWallet();
|
||||
},
|
||||
style: 'destructive',
|
||||
},
|
||||
{
|
||||
text: loc.wallets.list_tryagain,
|
||||
onPress: () => {
|
||||
navigate('AddWalletRoot', { screen: 'ImportWallet', params: { label: wallet.getSecret() } });
|
||||
WalletImport.removePlaceholderWallet();
|
||||
},
|
||||
style: 'default',
|
||||
},
|
||||
],
|
||||
{ cancelable: false },
|
||||
);
|
||||
} else {
|
||||
const walletID = wallet.getID();
|
||||
navigate('WalletTransactions', {
|
||||
walletID,
|
||||
walletType: wallet.type,
|
||||
key: `WalletTransactions-${walletID}`,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// if its out of index - this must be last card with incentive to create wallet
|
||||
if (index <= wallets.length - 1) {
|
||||
const wallet = wallets[index];
|
||||
const walletID = wallet.getID();
|
||||
navigate('WalletTransactions', {
|
||||
walletID,
|
||||
walletType: wallet.type,
|
||||
key: `WalletTransactions-${walletID}`,
|
||||
});
|
||||
} else if (index >= wallets.length && !isImportingWallet) {
|
||||
navigate('AddWalletRoot');
|
||||
}
|
||||
};
|
||||
|
|
@ -207,10 +171,16 @@ const WalletsList = () => {
|
|||
|
||||
const contentOffset = e.nativeEvent.contentOffset;
|
||||
const index = Math.ceil(contentOffset.x / width);
|
||||
console.log('onSnapToItem', 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));
|
||||
|
||||
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));
|
||||
}
|
||||
currentWalletIndex.current = index;
|
||||
} else {
|
||||
console.log('onSnapToItem did not change. Most likely momentum stopped at the same index it started.');
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -231,7 +201,7 @@ const WalletsList = () => {
|
|||
};
|
||||
|
||||
const handleLongPress = () => {
|
||||
if (carouselData.length > 1 && !carouselData.some(wallet => wallet.type === PlaceholderWallet.type)) {
|
||||
if (wallets.length > 1 && !isImportingWallet) {
|
||||
navigate('ReorderWallets');
|
||||
} else {
|
||||
ReactNativeHapticFeedback.trigger('notificationError', { ignoreAndroidSystemSettings: false });
|
||||
|
|
@ -247,8 +217,8 @@ const WalletsList = () => {
|
|||
};
|
||||
|
||||
const renderLocalTrader = () => {
|
||||
if (carouselData.every(wallet => wallet === false)) return null;
|
||||
if (carouselData.length > 0 && !carouselData.some(wallet => wallet.type === PlaceholderWallet.type)) {
|
||||
if (wallets.every(wallet => wallet === false)) return null;
|
||||
if (wallets.length > 0 && !isImportingWallet) {
|
||||
const button = (
|
||||
<TouchableOpacity
|
||||
accessibilityRole="button"
|
||||
|
|
@ -272,8 +242,8 @@ const WalletsList = () => {
|
|||
const renderWalletsCarousel = () => {
|
||||
return (
|
||||
<WalletsCarousel
|
||||
data={carouselData}
|
||||
extraData={carouselData}
|
||||
data={wallets.concat(false)}
|
||||
extraData={[wallets, isImportingWallet]}
|
||||
onPress={handleClick}
|
||||
handleLongPress={handleLongPress}
|
||||
onMomentumScrollEnd={onSnapToItem}
|
||||
|
|
@ -302,10 +272,7 @@ const WalletsList = () => {
|
|||
switch (section.section.key) {
|
||||
case WalletsListSections.CAROUSEL:
|
||||
return isLargeScreen ? null : (
|
||||
<BlueHeaderDefaultMain
|
||||
leftText={loc.wallets.list_title}
|
||||
onNewWalletPress={!carouselData.some(wallet => wallet.type === PlaceholderWallet.type) ? () => navigate('AddWalletRoot') : null}
|
||||
/>
|
||||
<BlueHeaderDefaultMain leftText={loc.wallets.list_title} onNewWalletPress={() => navigate('AddWalletRoot')} />
|
||||
);
|
||||
case WalletsListSections.TRANSACTIONS:
|
||||
return renderListHeaderComponent();
|
||||
|
|
@ -333,7 +300,7 @@ const WalletsList = () => {
|
|||
};
|
||||
|
||||
const renderScanButton = () => {
|
||||
if (carouselData.length > 0 && !carouselData.some(wallet => wallet.type === PlaceholderWallet.type)) {
|
||||
if (wallets.length > 0 && isImportingWallet) {
|
||||
return (
|
||||
<FContainer ref={walletActionButtonsRef}>
|
||||
<FButton
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue