mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2025-02-21 22:42:21 +01:00
REF: Wallets List uses React Hooks (#1762)
This commit is contained in:
Marcos Rodriguez Vélez
GitHub
parent
5c880d6fd6
commit
2484a74b42
6 changed files with 202 additions and 261 deletions
|
|
@ -1567,7 +1567,7 @@ export const NewWalletPanel = props => {
|
|||
minHeight: Platform.OS === 'ios' ? 164 : 181,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'flex-start',
|
||||
backgroundColor: WalletGradient.createWallet,
|
||||
backgroundColor: WalletGradient.createWallet(),
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
|
|
|
|||
|
|
@ -278,7 +278,7 @@ function DrawerRoot() {
|
|||
|
||||
const InitStack = createStackNavigator();
|
||||
const InitRoot = () => (
|
||||
<InitStack.Navigator screenOptions={defaultScreenOptions} initialRouteName="LoadingScreenRoot">
|
||||
<InitStack.Navigator mode="modal" screenOptions={defaultScreenOptions} initialRouteName="LoadingScreenRoot">
|
||||
<InitStack.Screen name="LoadingScreenRoot" component={LoadingScreenRoot} options={{ headerShown: false, animationEnabled: false }} />
|
||||
<InitStack.Screen
|
||||
name="UnlockWithScreenRoot"
|
||||
|
|
@ -292,7 +292,7 @@ const InitRoot = () => (
|
|||
|
||||
const RootStack = createStackNavigator();
|
||||
const Navigation = () => (
|
||||
<RootStack.Navigator mode="modal" screenOptions={defaultScreenOptions} initialRouteName="LoadingScreenRoot">
|
||||
<RootStack.Navigator screenOptions={defaultScreenOptions} initialRouteName="LoadingScreenRoot">
|
||||
{/* stacks */}
|
||||
<RootStack.Screen name="WalletsRoot" component={WalletsRoot} options={{ headerShown: false }} />
|
||||
<RootStack.Screen name="AddWalletRoot" component={AddWalletRoot} options={{ headerShown: false, gestureEnabled: false }} />
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ import { PlaceholderWallet } from './wallets/placeholder-wallet';
|
|||
import { SegwitBech32Wallet } from './wallets/segwit-bech32-wallet';
|
||||
import { HDLegacyElectrumSeedP2PKHWallet } from './wallets/hd-legacy-electrum-seed-p2pkh-wallet';
|
||||
import { HDSegwitElectrumSeedP2WPKHWallet } from './wallets/hd-segwit-electrum-seed-p2wpkh-wallet';
|
||||
import { BlueCurrentTheme } from '../components/themes';
|
||||
import { MultisigHDWallet } from './wallets/multisig-hd-wallet';
|
||||
import { useTheme } from '@react-navigation/native';
|
||||
|
||||
export default class WalletGradient {
|
||||
static hdSegwitP2SHWallet = ['#65ceef', '#68bbe1'];
|
||||
|
|
@ -23,7 +23,12 @@ export default class WalletGradient {
|
|||
static multisigHdWallet = ['#1ce6eb', '#296fc5', '#3500A2'];
|
||||
static defaultGradients = ['#c65afb', '#9053fe'];
|
||||
static lightningCustodianWallet = ['#f1be07', '#f79056'];
|
||||
static createWallet = BlueCurrentTheme.colors.lightButton;
|
||||
|
||||
static createWallet = () => {
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
const { colors } = useTheme();
|
||||
return colors.lightButton;
|
||||
};
|
||||
|
||||
static gradientsFor(type) {
|
||||
let gradient;
|
||||
|
|
|
|||
|
|
@ -98,20 +98,16 @@ const DrawerList = props => {
|
|||
);
|
||||
};
|
||||
|
||||
const onNewWalletPress = () => {
|
||||
return !BlueApp.getWallets().some(wallet => wallet.type === PlaceholderWallet.type) ? props.navigation.navigate('AddWalletRoot') : null;
|
||||
};
|
||||
|
||||
return (
|
||||
<DrawerContentScrollView {...props} scrollEnabled={false}>
|
||||
<View styles={[styles.root, stylesHook.root]}>
|
||||
<StatusBar barStyle="default" />
|
||||
<SafeAreaView style={styles.root}>
|
||||
<BlueHeaderDefaultMain
|
||||
leftText={loc.wallets.list_title}
|
||||
onNewWalletPress={
|
||||
!BlueApp.getWallets().some(wallet => wallet.type === PlaceholderWallet.type)
|
||||
? () => props.navigation.navigate('AddWalletRoot')
|
||||
: null
|
||||
}
|
||||
isDrawerList
|
||||
/>
|
||||
<BlueHeaderDefaultMain leftText={loc.wallets.list_title} onNewWalletPress={onNewWalletPress} isDrawerList />
|
||||
</SafeAreaView>
|
||||
{renderWalletsCarousel()}
|
||||
</View>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,22 @@
|
|||
/* global alert */
|
||||
import React, { Component } from 'react';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
StatusBar,
|
||||
View,
|
||||
TouchableOpacity,
|
||||
Text,
|
||||
StyleSheet,
|
||||
InteractionManager,
|
||||
SectionList,
|
||||
Alert,
|
||||
Platform,
|
||||
Image,
|
||||
Dimensions,
|
||||
useWindowDimensions,
|
||||
} from 'react-native';
|
||||
import { WalletsCarousel, BlueHeaderDefaultMain, BlueTransactionListItem, BlueNavigationStyle } from '../../BlueComponents';
|
||||
import { Icon } from 'react-native-elements';
|
||||
import DeeplinkSchemaMatch from '../../class/deeplink-schema-match';
|
||||
import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
|
||||
import PropTypes from 'prop-types';
|
||||
import { AppStorage, PlaceholderWallet } from '../../class';
|
||||
import WalletImport from '../../class/wallet-import';
|
||||
import ActionSheet from '../ActionSheet';
|
||||
|
|
@ -29,6 +28,7 @@ import { BlueCurrentTheme } from '../../components/themes';
|
|||
import { FContainer, FButton } from '../../components/FloatButtons';
|
||||
import { getSystemName, isTablet } from 'react-native-device-info';
|
||||
import ScanQRCode from '../send/ScanQRCode';
|
||||
import { useFocusEffect, useNavigation, useRoute, useTheme } from '@react-navigation/native';
|
||||
const EV = require('../../blue_modules/events');
|
||||
const A = require('../../blue_modules/analytics');
|
||||
const BlueApp: AppStorage = require('../../BlueApp');
|
||||
|
|
@ -36,110 +36,94 @@ const BlueElectrum = require('../../blue_modules/BlueElectrum');
|
|||
const LocalQRCode = require('@remobile/react-native-qrcode-local-image');
|
||||
|
||||
const WalletsListSections = { CAROUSEL: 'CAROUSEL', LOCALTRADER: 'LOCALTRADER', TRANSACTIONS: 'TRANSACTIONS' };
|
||||
|
||||
let lastSnappedTo = 0;
|
||||
const isDesktop = getSystemName() === 'Mac OS X';
|
||||
export default class WalletsList extends Component {
|
||||
walletsCarousel = React.createRef();
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const width = Dimensions.get('window').width;
|
||||
this.state = {
|
||||
isLoading: true,
|
||||
isFlatListRefreshControlHidden: true,
|
||||
wallets: BlueApp.getWallets().concat(false),
|
||||
timeElpased: 0,
|
||||
dataSource: [],
|
||||
itemWidth: width * 0.82 > 375 ? 375 : width * 0.82,
|
||||
isLargeScreen:
|
||||
Platform.OS === 'android' ? isTablet() : Dimensions.get('window').width >= Dimensions.get('screen').width / 3 && isTablet(),
|
||||
};
|
||||
EV(EV.enum.WALLETS_COUNT_CHANGED, () => this.redrawScreen(true));
|
||||
const WalletsList = () => {
|
||||
const walletsCarousel = useRef();
|
||||
const { width } = useWindowDimensions();
|
||||
const { colors, scanImage } = useTheme();
|
||||
const { navigate } = useNavigation();
|
||||
const routeName = useRoute().name;
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [wallets, setWallets] = useState(BlueApp.getWallets().concat(false));
|
||||
const [itemWidth, setItemWidth] = useState(width * 0.82 > 375 ? 375 : width * 0.82);
|
||||
const [isLargeScreen, setIsLargeScreen] = useState(
|
||||
Platform.OS === 'android' ? isTablet() : width >= Dimensions.get('screen').width / 3 && isTablet(),
|
||||
);
|
||||
const [dataSource, setDataSource] = useState([]);
|
||||
|
||||
const stylesHook = StyleSheet.create({
|
||||
walletsListWrapper: {
|
||||
backgroundColor: colors.brandingColor,
|
||||
},
|
||||
listHeaderBack: {
|
||||
backgroundColor: colors.background,
|
||||
},
|
||||
listHeaderText: {
|
||||
color: colors.foregroundColor,
|
||||
},
|
||||
ltRoot: {
|
||||
backgroundColor: colors.ballOutgoingExpired,
|
||||
},
|
||||
|
||||
ltTextBig: {
|
||||
color: colors.foregroundColor,
|
||||
},
|
||||
ltTextSmall: {
|
||||
color: colors.alternativeTextColor,
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
EV(EV.enum.WALLETS_COUNT_CHANGED, () => redrawScreen(true));
|
||||
// here, when we receive TRANSACTIONS_COUNT_CHANGED we do not query
|
||||
// remote server, we just redraw the screen
|
||||
EV(EV.enum.TRANSACTIONS_COUNT_CHANGED, this.redrawScreen);
|
||||
}
|
||||
EV(EV.enum.TRANSACTIONS_COUNT_CHANGED, redrawScreen);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
componentDidMount() {
|
||||
console.log('wallets/list componentDidMount');
|
||||
// the idea is that upon wallet launch we will refresh
|
||||
// all balances and all transactions here:
|
||||
this.redrawScreen();
|
||||
|
||||
InteractionManager.runAfterInteractions(async () => {
|
||||
try {
|
||||
await BlueElectrum.waitTillConnected();
|
||||
const balanceStart = +new Date();
|
||||
await BlueApp.fetchWalletBalances();
|
||||
const balanceEnd = +new Date();
|
||||
console.log('fetch all wallet balances took', (balanceEnd - balanceStart) / 1000, 'sec');
|
||||
const start = +new Date();
|
||||
await BlueApp.fetchWalletTransactions();
|
||||
const end = +new Date();
|
||||
console.log('fetch all wallet txs took', (end - start) / 1000, 'sec');
|
||||
await BlueApp.saveToDisk();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
|
||||
this.interval = setInterval(() => {
|
||||
this.setState(prev => ({ timeElapsed: prev.timeElapsed + 1 }));
|
||||
}, 60000);
|
||||
this.redrawScreen();
|
||||
|
||||
this._unsubscribe = this.props.navigation.addListener('focus', this.onNavigationEventFocus);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
clearInterval(this.interval);
|
||||
this._unsubscribe();
|
||||
}
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
redrawScreen();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []),
|
||||
);
|
||||
|
||||
/**
|
||||
* Forcefully fetches TXs and balance for lastSnappedTo (i.e. current) wallet.
|
||||
* Triggered manually by user on pull-to-refresh.
|
||||
*/
|
||||
refreshTransactions = () => {
|
||||
this.setState(
|
||||
{
|
||||
isFlatListRefreshControlHidden: false,
|
||||
},
|
||||
() => {
|
||||
InteractionManager.runAfterInteractions(async () => {
|
||||
let noErr = true;
|
||||
try {
|
||||
// await BlueElectrum.ping();
|
||||
await BlueElectrum.waitTillConnected();
|
||||
const balanceStart = +new Date();
|
||||
await BlueApp.fetchWalletBalances(lastSnappedTo || 0);
|
||||
const balanceEnd = +new Date();
|
||||
console.log('fetch balance took', (balanceEnd - balanceStart) / 1000, 'sec');
|
||||
const start = +new Date();
|
||||
await BlueApp.fetchWalletTransactions(lastSnappedTo || 0);
|
||||
const end = +new Date();
|
||||
console.log('fetch tx took', (end - start) / 1000, 'sec');
|
||||
} catch (err) {
|
||||
noErr = false;
|
||||
console.warn(err);
|
||||
}
|
||||
if (noErr) await BlueApp.saveToDisk(); // caching
|
||||
|
||||
this.redrawScreen();
|
||||
});
|
||||
},
|
||||
);
|
||||
const refreshTransactions = async () => {
|
||||
setIsLoading(true);
|
||||
let noErr = true;
|
||||
try {
|
||||
// await BlueElectrum.ping();
|
||||
await BlueElectrum.waitTillConnected();
|
||||
const balanceStart = +new Date();
|
||||
await BlueApp.fetchWalletBalances(lastSnappedTo || 0);
|
||||
const balanceEnd = +new Date();
|
||||
console.log('fetch balance took', (balanceEnd - balanceStart) / 1000, 'sec');
|
||||
const start = +new Date();
|
||||
await BlueApp.fetchWalletTransactions(lastSnappedTo || 0);
|
||||
const end = +new Date();
|
||||
console.log('fetch tx took', (end - start) / 1000, 'sec');
|
||||
} catch (err) {
|
||||
noErr = false;
|
||||
console.warn(err);
|
||||
setIsLoading(false);
|
||||
}
|
||||
if (noErr) await BlueApp.saveToDisk(); // caching
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
redrawScreen = (scrollToEnd = false) => {
|
||||
const redrawScreen = (scrollToEnd = false) => {
|
||||
console.log('wallets/list redrawScreen()');
|
||||
|
||||
// here, when we receive REMOTE_TRANSACTIONS_COUNT_CHANGED we fetch TXs and balance for current wallet.
|
||||
// placing event subscription here so it gets exclusively re-subscribed more often. otherwise we would
|
||||
// have to unsubscribe on unmount and resubscribe again on mount.
|
||||
EV(EV.enum.REMOTE_TRANSACTIONS_COUNT_CHANGED, this.refreshTransactions, true);
|
||||
EV(EV.enum.REMOTE_TRANSACTIONS_COUNT_CHANGED, refreshTransactions, true);
|
||||
|
||||
if (BlueApp.getBalance() !== 0) {
|
||||
A(A.ENUM.GOT_NONZERO_BALANCE);
|
||||
|
|
@ -147,37 +131,23 @@ export default class WalletsList extends Component {
|
|||
A(A.ENUM.GOT_ZERO_BALANCE);
|
||||
}
|
||||
|
||||
const wallets = BlueApp.getWallets().concat(false);
|
||||
const dataSource = BlueApp.getTransactions(null, 10);
|
||||
const storedWallets = BlueApp.getWallets().concat(false);
|
||||
const storedDataSource = BlueApp.getTransactions(null, 10);
|
||||
if (scrollToEnd) {
|
||||
scrollToEnd = wallets.length > this.state.wallets.length;
|
||||
scrollToEnd = storedWallets.length > wallets.length;
|
||||
}
|
||||
|
||||
this.setState(
|
||||
{
|
||||
isLoading: false,
|
||||
isFlatListRefreshControlHidden: true,
|
||||
dataSource,
|
||||
wallets,
|
||||
},
|
||||
() => {
|
||||
this.props.navigation.navigate('DrawerRoot', { wallets: BlueApp.getWallets() });
|
||||
if (scrollToEnd) {
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
this.walletsCarousel?.current?.snapToItem(this.state.wallets.length - 2);
|
||||
}
|
||||
},
|
||||
);
|
||||
setDataSource(storedDataSource);
|
||||
setWallets(storedWallets);
|
||||
setIsLoading(false);
|
||||
if (scrollToEnd) {
|
||||
navigate('DrawerRoot', { wallets: BlueApp.getWallets() });
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
walletsCarousel.current?.snapToItem(storedWallets.length - 2);
|
||||
}
|
||||
};
|
||||
|
||||
txMemo(hash) {
|
||||
if (BlueApp.tx_metadata[hash] && BlueApp.tx_metadata[hash].memo) {
|
||||
return BlueApp.tx_metadata[hash].memo;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
handleClick = index => {
|
||||
const handleClick = index => {
|
||||
console.log('click', index);
|
||||
const wallet = BlueApp.wallets[index];
|
||||
if (wallet) {
|
||||
|
|
@ -197,7 +167,7 @@ export default class WalletsList extends Component {
|
|||
{
|
||||
text: loc.wallets.list_tryagain,
|
||||
onPress: () => {
|
||||
this.props.navigation.navigate('AddWalletRoot', { screen: 'ImportWallet', params: { label: wallet.getSecret() } });
|
||||
navigate('AddWalletRoot', { screen: 'ImportWallet', params: { label: wallet.getSecret() } });
|
||||
WalletImport.removePlaceholderWallet();
|
||||
EV(EV.enum.WALLETS_COUNT_CHANGED);
|
||||
},
|
||||
|
|
@ -207,32 +177,32 @@ export default class WalletsList extends Component {
|
|||
{ cancelable: false },
|
||||
);
|
||||
} else {
|
||||
this.props.navigation.navigate('WalletTransactions', {
|
||||
wallet: wallet,
|
||||
navigate('WalletTransactions', {
|
||||
wallet,
|
||||
key: `WalletTransactions-${wallet.getID()}`,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// if its out of index - this must be last card with incentive to create wallet
|
||||
if (!BlueApp.getWallets().some(wallet => wallet.type === PlaceholderWallet.type)) {
|
||||
this.props.navigation.navigate('AddWalletRoot');
|
||||
navigate('AddWalletRoot');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onSnapToItem = index => {
|
||||
const onSnapToItem = index => {
|
||||
console.log('onSnapToItem', index);
|
||||
lastSnappedTo = index;
|
||||
if (index < BlueApp.getWallets().length) {
|
||||
// not the last
|
||||
}
|
||||
|
||||
if (this.state.wallets[index].type === PlaceholderWallet.type) {
|
||||
if (wallets[index].type === PlaceholderWallet.type) {
|
||||
return;
|
||||
}
|
||||
|
||||
// now, lets try to fetch balance and txs for this wallet in case it has changed
|
||||
this.lazyRefreshWallet(index);
|
||||
lazyRefreshWallet(index);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -241,7 +211,7 @@ export default class WalletsList extends Component {
|
|||
* @param index {Integer} Index of the wallet.
|
||||
* @return {Promise.<void>}
|
||||
*/
|
||||
async lazyRefreshWallet(index) {
|
||||
const lazyRefreshWallet = async index => {
|
||||
/** @type {Array.<AbstractWallet>} wallets */
|
||||
const wallets = BlueApp.getWallets();
|
||||
if (!wallets[index]) {
|
||||
|
|
@ -260,7 +230,7 @@ export default class WalletsList extends Component {
|
|||
console.log('balance changed, thus txs too');
|
||||
// balance changed, thus txs too
|
||||
await wallets[index].fetchTransactions();
|
||||
this.redrawScreen();
|
||||
redrawScreen();
|
||||
didRefresh = true;
|
||||
} else if (wallets[index].timeToRefreshTransaction()) {
|
||||
console.log(wallets[index].getLabel(), 'thinks its time to refresh TXs');
|
||||
|
|
@ -272,7 +242,7 @@ export default class WalletsList extends Component {
|
|||
await wallets[index].fetchUserInvoices();
|
||||
await wallets[index].fetchBalance(); // chances are, paid ln invoice was processed during `fetchUserInvoices()` call and altered user's balance, so its worth fetching balance again
|
||||
}
|
||||
this.redrawScreen();
|
||||
redrawScreen();
|
||||
didRefresh = true;
|
||||
} else {
|
||||
console.log('balance not changed');
|
||||
|
|
@ -286,33 +256,31 @@ export default class WalletsList extends Component {
|
|||
if (noErr && didRefresh) {
|
||||
await BlueApp.saveToDisk(); // caching
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_keyExtractor = (_item, index) => index.toString();
|
||||
|
||||
renderListHeaderComponent = () => {
|
||||
const style = { opacity: this.state.isFlatListRefreshControlHidden ? 1.0 : 0.5 };
|
||||
const renderListHeaderComponent = () => {
|
||||
const style = { opacity: isLoading ? 1.0 : 0.5 };
|
||||
return (
|
||||
<View style={styles.listHeaderBack}>
|
||||
<Text style={styles.listHeaderText}>{loc.transactions.list_title}</Text>
|
||||
<View style={[styles.listHeaderBack, stylesHook.listHeaderBack]}>
|
||||
<Text style={[styles.listHeaderText, stylesHook.listHeaderText]}>{loc.transactions.list_title}</Text>
|
||||
{isDesktop && (
|
||||
<TouchableOpacity style={style} onPress={this.refreshTransactions} disabled={this.state.isLoading}>
|
||||
<Icon name="refresh" type="font-awesome" color={BlueCurrentTheme.colors.feeText} />
|
||||
<TouchableOpacity style={style} onPress={refreshTransactions} disabled={isLoading}>
|
||||
<Icon name="refresh" type="font-awesome" color={colors.feeText} />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
handleLongPress = () => {
|
||||
const handleLongPress = () => {
|
||||
if (BlueApp.getWallets().length > 1 && !BlueApp.getWallets().some(wallet => wallet.type === PlaceholderWallet.type)) {
|
||||
this.props.navigation.navigate('ReorderWallets');
|
||||
navigate('ReorderWallets');
|
||||
} else {
|
||||
ReactNativeHapticFeedback.trigger('notificationError', { ignoreAndroidSystemSettings: false });
|
||||
}
|
||||
};
|
||||
|
||||
renderTransactionListsRow = data => {
|
||||
const renderTransactionListsRow = data => {
|
||||
return (
|
||||
<View style={styles.transaction}>
|
||||
<BlueTransactionListItem item={data.item} itemPriceUnit={data.item.walletPreferredBalanceUnit} />
|
||||
|
|
@ -320,18 +288,18 @@ export default class WalletsList extends Component {
|
|||
);
|
||||
};
|
||||
|
||||
renderLocalTrader = () => {
|
||||
const renderLocalTrader = () => {
|
||||
if (BlueApp.getWallets().length > 0 && !BlueApp.getWallets().some(wallet => wallet.type === PlaceholderWallet.type)) {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
this.props.navigation.navigate('HodlHodl', { params: { wallet: this.state.wallet }, screen: 'HodlHodl' });
|
||||
navigate('HodlHodl', { screen: 'HodlHodl' });
|
||||
}}
|
||||
style={styles.ltRoot}
|
||||
style={[styles.ltRoot, stylesHook.ltRoot]}
|
||||
>
|
||||
<View style={styles.ltTextWrap}>
|
||||
<Text style={styles.ltTextBig}>Local Trader</Text>
|
||||
<Text style={styles.ltTextSmall}>{loc.hodl.p2p}</Text>
|
||||
<Text style={[styles.ltTextBig, stylesHook.ltTextBig]}>Local Trader</Text>
|
||||
<Text style={[styles.ltTextSmall, stylesHook.ltTextSmall]}>{loc.hodl.p2p}</Text>
|
||||
</View>
|
||||
<View style={styles.ltButtonWrap}>
|
||||
<Text style={styles.ltButton}>New</Text>
|
||||
|
|
@ -343,59 +311,57 @@ export default class WalletsList extends Component {
|
|||
}
|
||||
};
|
||||
|
||||
renderWalletsCarousel = () => {
|
||||
const renderWalletsCarousel = () => {
|
||||
return (
|
||||
<WalletsCarousel
|
||||
removeClippedSubviews={false}
|
||||
data={this.state.wallets}
|
||||
onPress={this.handleClick}
|
||||
handleLongPress={this.handleLongPress}
|
||||
onSnapToItem={this.onSnapToItem}
|
||||
ref={this.walletsCarousel}
|
||||
data={wallets}
|
||||
onPress={handleClick}
|
||||
handleLongPress={handleLongPress}
|
||||
onSnapToItem={onSnapToItem}
|
||||
ref={walletsCarousel}
|
||||
testID="WalletsList"
|
||||
sliderWidth={Dimensions.get('window').width}
|
||||
itemWidth={this.state.itemWidth}
|
||||
sliderWidth={width}
|
||||
itemWidth={itemWidth}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
renderSectionItem = item => {
|
||||
const renderSectionItem = item => {
|
||||
switch (item.section.key) {
|
||||
case WalletsListSections.CAROUSEL:
|
||||
return this.state.isLargeScreen ? null : this.renderWalletsCarousel();
|
||||
return isLargeScreen ? null : renderWalletsCarousel();
|
||||
case WalletsListSections.LOCALTRADER:
|
||||
return this.renderLocalTrader();
|
||||
return renderLocalTrader();
|
||||
case WalletsListSections.TRANSACTIONS:
|
||||
return this.renderTransactionListsRow(item);
|
||||
return renderTransactionListsRow(item);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
renderSectionHeader = ({ section }) => {
|
||||
switch (section.key) {
|
||||
const renderSectionHeader = section => {
|
||||
switch (section.section.key) {
|
||||
case WalletsListSections.CAROUSEL:
|
||||
return this.state.isLargeScreen ? null : (
|
||||
return isLargeScreen ? null : (
|
||||
<BlueHeaderDefaultMain
|
||||
leftText={loc.wallets.list_title}
|
||||
onNewWalletPress={
|
||||
!BlueApp.getWallets().some(wallet => wallet.type === PlaceholderWallet.type)
|
||||
? () => this.props.navigation.navigate('AddWalletRoot')
|
||||
: null
|
||||
!BlueApp.getWallets().some(wallet => wallet.type === PlaceholderWallet.type) ? () => navigate('AddWalletRoot') : null
|
||||
}
|
||||
/>
|
||||
);
|
||||
case WalletsListSections.TRANSACTIONS:
|
||||
return this.renderListHeaderComponent();
|
||||
return renderListHeaderComponent();
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
renderSectionFooter = ({ section }) => {
|
||||
switch (section.key) {
|
||||
const renderSectionFooter = section => {
|
||||
switch (section.section.key) {
|
||||
case WalletsListSections.TRANSACTIONS:
|
||||
if (this.state.dataSource.length === 0 && !this.state.isLoading) {
|
||||
if (dataSource.length === 0 && !isLoading) {
|
||||
return (
|
||||
<View style={styles.footerRoot}>
|
||||
<Text style={styles.footerEmpty}>{loc.wallets.list_empty_txs1}</Text>
|
||||
|
|
@ -410,14 +376,14 @@ export default class WalletsList extends Component {
|
|||
}
|
||||
};
|
||||
|
||||
renderScanButton = () => {
|
||||
const renderScanButton = () => {
|
||||
if (BlueApp.getWallets().length > 0 && !BlueApp.getWallets().some(wallet => wallet.type === PlaceholderWallet.type)) {
|
||||
return (
|
||||
<FContainer>
|
||||
<FButton
|
||||
onPress={this.onScanButtonPressed}
|
||||
onLongPress={isDesktop ? undefined : this.sendButtonLongPress}
|
||||
icon={<Image resizeMode="stretch" source={BlueCurrentTheme.scanImage} />}
|
||||
onPress={onScanButtonPressed}
|
||||
onLongPress={isDesktop ? undefined : sendButtonLongPress}
|
||||
icon={<Image resizeMode="stretch" source={scanImage} />}
|
||||
text={loc.send.details_scan}
|
||||
/>
|
||||
</FContainer>
|
||||
|
|
@ -427,37 +393,33 @@ export default class WalletsList extends Component {
|
|||
}
|
||||
};
|
||||
|
||||
sectionListKeyExtractor = (item, index) => {
|
||||
const sectionListKeyExtractor = (item, index) => {
|
||||
return `${item}${index}}`;
|
||||
};
|
||||
|
||||
onScanButtonPressed = () => {
|
||||
const onScanButtonPressed = () => {
|
||||
if (isDesktop) {
|
||||
this.sendButtonLongPress();
|
||||
sendButtonLongPress();
|
||||
} else {
|
||||
this.props.navigation.navigate('ScanQRCodeRoot', {
|
||||
navigate('ScanQRCodeRoot', {
|
||||
screen: 'ScanQRCode',
|
||||
params: {
|
||||
launchedBy: this.props.route.name,
|
||||
onBarScanned: this.onBarScanned,
|
||||
launchedBy: routeName,
|
||||
onBarScanned,
|
||||
showFileImportButton: false,
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onBarScanned = value => {
|
||||
const onBarScanned = value => {
|
||||
DeeplinkSchemaMatch.navigationRouteFor({ url: value }, completionValue => {
|
||||
ReactNativeHapticFeedback.trigger('impactLight', { ignoreAndroidSystemSettings: false });
|
||||
this.props.navigation.navigate(...completionValue);
|
||||
navigate(...completionValue);
|
||||
});
|
||||
};
|
||||
|
||||
onNavigationEventFocus = () => {
|
||||
this.redrawScreen();
|
||||
};
|
||||
|
||||
choosePhoto = () => {
|
||||
const choosePhoto = () => {
|
||||
ImagePicker.launchImageLibrary(
|
||||
{
|
||||
title: null,
|
||||
|
|
@ -469,7 +431,7 @@ export default class WalletsList extends Component {
|
|||
const uri = Platform.OS === 'ios' ? response.uri.toString().replace('file://', '') : response.path.toString();
|
||||
LocalQRCode.decode(uri, (error, result) => {
|
||||
if (!error) {
|
||||
this.onBarScanned(result);
|
||||
onBarScanned(result);
|
||||
} else {
|
||||
alert(loc.send.qr_error_no_qrcode);
|
||||
}
|
||||
|
|
@ -479,7 +441,7 @@ export default class WalletsList extends Component {
|
|||
);
|
||||
};
|
||||
|
||||
takePhoto = () => {
|
||||
const takePhoto = () => {
|
||||
ImagePicker.launchCamera(
|
||||
{
|
||||
title: null,
|
||||
|
|
@ -491,7 +453,7 @@ export default class WalletsList extends Component {
|
|||
const uri = Platform.OS === 'ios' ? response.uri.toString().replace('file://', '') : response.path.toString();
|
||||
LocalQRCode.decode(uri, (error, result) => {
|
||||
if (!error) {
|
||||
this.onBarScanned(result);
|
||||
onBarScanned(result);
|
||||
} else {
|
||||
alert(loc.send.qr_error_no_qrcode);
|
||||
}
|
||||
|
|
@ -503,11 +465,11 @@ export default class WalletsList extends Component {
|
|||
);
|
||||
};
|
||||
|
||||
copyFromClipbard = async () => {
|
||||
this.onBarScanned(await Clipboard.getString());
|
||||
const copyFromClipbard = async () => {
|
||||
onBarScanned(await Clipboard.getString());
|
||||
};
|
||||
|
||||
sendButtonLongPress = async () => {
|
||||
const sendButtonLongPress = async () => {
|
||||
const isClipboardEmpty = (await Clipboard.getString()).replace(' ', '').length === 0;
|
||||
if (Platform.OS === 'ios') {
|
||||
const options = [loc._.cancel, loc.wallets.list_long_choose, isDesktop ? loc.wallets.take_photo : loc.wallets.list_long_scan];
|
||||
|
|
@ -516,22 +478,22 @@ export default class WalletsList extends Component {
|
|||
}
|
||||
ActionSheet.showActionSheetWithOptions({ options, cancelButtonIndex: 0 }, buttonIndex => {
|
||||
if (buttonIndex === 1) {
|
||||
this.choosePhoto();
|
||||
choosePhoto();
|
||||
} else if (buttonIndex === 2) {
|
||||
if (isDesktop) {
|
||||
this.takePhoto();
|
||||
takePhoto();
|
||||
} else {
|
||||
this.props.navigation.navigate('ScanQRCodeRoot', {
|
||||
navigate('ScanQRCodeRoot', {
|
||||
screen: 'ScanQRCode',
|
||||
params: {
|
||||
launchedBy: this.props.route.name,
|
||||
onBarScanned: this.onBarScanned,
|
||||
launchedBy: routeName,
|
||||
onBarScanned,
|
||||
showFileImportButton: false,
|
||||
},
|
||||
});
|
||||
}
|
||||
} else if (buttonIndex === 3) {
|
||||
this.copyFromClipbard();
|
||||
copyFromClipbard();
|
||||
}
|
||||
});
|
||||
} else if (Platform.OS === 'android') {
|
||||
|
|
@ -543,16 +505,16 @@ export default class WalletsList extends Component {
|
|||
},
|
||||
{
|
||||
text: loc.wallets.list_long_choose,
|
||||
onPress: this.choosePhoto,
|
||||
onPress: choosePhoto,
|
||||
},
|
||||
{
|
||||
text: loc.wallets.list_long_scan,
|
||||
onPress: () =>
|
||||
this.props.navigation.navigate('ScanQRCodeRoot', {
|
||||
navigate('ScanQRCodeRoot', {
|
||||
screen: 'ScanQRCode',
|
||||
params: {
|
||||
launchedBy: this.props.route.name,
|
||||
onBarScanned: this.onBarScanned,
|
||||
launchedBy: routeName,
|
||||
onBarScanned,
|
||||
showFileImportButton: false,
|
||||
},
|
||||
}),
|
||||
|
|
@ -561,7 +523,7 @@ export default class WalletsList extends Component {
|
|||
if (!isClipboardEmpty) {
|
||||
buttons.push({
|
||||
text: loc.wallets.list_long_clipboard,
|
||||
onPress: this.copyFromClipbard,
|
||||
onPress: copyFromClipbard,
|
||||
});
|
||||
}
|
||||
ActionSheet.showActionSheetWithOptions({
|
||||
|
|
@ -572,40 +534,37 @@ export default class WalletsList extends Component {
|
|||
}
|
||||
};
|
||||
|
||||
onLayout = _e => {
|
||||
const width = Dimensions.get('window').width;
|
||||
this.setState({
|
||||
isLargeScreen: Platform.OS === 'android' ? isTablet() : width >= Dimensions.get('screen').width / 3 && isTablet(),
|
||||
itemWidth: width * 0.82 > 375 ? 375 : width * 0.82,
|
||||
});
|
||||
const onLayout = _e => {
|
||||
setIsLargeScreen(Platform.OS === 'android' ? isTablet() : width >= Dimensions.get('screen').width / 3 && isTablet());
|
||||
setItemWidth(width * 0.82 > 375 ? 375 : width * 0.82);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.root} onLayout={this.onLayout}>
|
||||
<StatusBar barStyle="default" />
|
||||
<View style={styles.walletsListWrapper}>
|
||||
<SectionList
|
||||
onRefresh={this.refreshTransactions}
|
||||
refreshing={!this.state.isFlatListRefreshControlHidden}
|
||||
renderItem={this.renderSectionItem}
|
||||
keyExtractor={this.sectionListKeyExtractor}
|
||||
renderSectionHeader={this.renderSectionHeader}
|
||||
initialNumToRender={20}
|
||||
contentInset={styles.scrollContent}
|
||||
renderSectionFooter={this.renderSectionFooter}
|
||||
sections={[
|
||||
{ key: WalletsListSections.CAROUSEL, data: [WalletsListSections.CAROUSEL] },
|
||||
{ key: WalletsListSections.LOCALTRADER, data: [WalletsListSections.LOCALTRADER] },
|
||||
{ key: WalletsListSections.TRANSACTIONS, data: this.state.dataSource },
|
||||
]}
|
||||
/>
|
||||
{this.renderScanButton()}
|
||||
</View>
|
||||
return (
|
||||
<View style={styles.root} onLayout={onLayout}>
|
||||
<StatusBar barStyle="default" />
|
||||
<View style={[styles.walletsListWrapper, stylesHook.walletsListWrapper]}>
|
||||
<SectionList
|
||||
onRefresh={refreshTransactions}
|
||||
refreshing={isLoading}
|
||||
renderItem={renderSectionItem}
|
||||
keyExtractor={sectionListKeyExtractor}
|
||||
renderSectionHeader={renderSectionHeader}
|
||||
initialNumToRender={20}
|
||||
contentInset={styles.scrollContent}
|
||||
renderSectionFooter={renderSectionFooter}
|
||||
sections={[
|
||||
{ key: WalletsListSections.CAROUSEL, data: [WalletsListSections.CAROUSEL] },
|
||||
{ key: WalletsListSections.LOCALTRADER, data: [WalletsListSections.LOCALTRADER] },
|
||||
{ key: WalletsListSections.TRANSACTIONS, data: dataSource },
|
||||
]}
|
||||
/>
|
||||
{renderScanButton()}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default WalletsList;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
root: {
|
||||
|
|
@ -618,12 +577,10 @@ const styles = StyleSheet.create({
|
|||
right: 0,
|
||||
},
|
||||
wrapper: {
|
||||
backgroundColor: BlueCurrentTheme.colors.brandingColor,
|
||||
flex: 1,
|
||||
},
|
||||
walletsListWrapper: {
|
||||
flex: 1,
|
||||
backgroundColor: BlueCurrentTheme.colors.brandingColor,
|
||||
},
|
||||
headerStyle: {
|
||||
...Platform.select({
|
||||
|
|
@ -648,7 +605,6 @@ const styles = StyleSheet.create({
|
|||
paddingVertical: 10,
|
||||
},
|
||||
listHeaderBack: {
|
||||
backgroundColor: BlueCurrentTheme.colors.background,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
|
|
@ -658,7 +614,6 @@ const styles = StyleSheet.create({
|
|||
fontWeight: 'bold',
|
||||
fontSize: 24,
|
||||
marginVertical: 8,
|
||||
color: BlueCurrentTheme.colors.foregroundColor,
|
||||
},
|
||||
ltRoot: {
|
||||
flexDirection: 'row',
|
||||
|
|
@ -666,7 +621,6 @@ const styles = StyleSheet.create({
|
|||
alignItems: 'center',
|
||||
marginHorizontal: 16,
|
||||
marginVertical: 16,
|
||||
backgroundColor: BlueCurrentTheme.colors.ballOutgoingExpired,
|
||||
padding: 16,
|
||||
borderRadius: 6,
|
||||
},
|
||||
|
|
@ -676,12 +630,10 @@ const styles = StyleSheet.create({
|
|||
ltTextBig: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: BlueCurrentTheme.colors.foregroundColor,
|
||||
},
|
||||
ltTextSmall: {
|
||||
fontSize: 13,
|
||||
fontWeight: '500',
|
||||
color: BlueCurrentTheme.colors.alternativeTextColor,
|
||||
},
|
||||
ltButtonWrap: {
|
||||
flexDirection: 'column',
|
||||
|
|
@ -719,17 +671,6 @@ const styles = StyleSheet.create({
|
|||
},
|
||||
});
|
||||
|
||||
WalletsList.propTypes = {
|
||||
navigation: PropTypes.shape({
|
||||
navigate: PropTypes.func,
|
||||
addListener: PropTypes.func,
|
||||
}),
|
||||
route: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
params: PropTypes.object,
|
||||
}),
|
||||
};
|
||||
|
||||
WalletsList.navigationOptions = ({ navigation, route }) => {
|
||||
return {
|
||||
...BlueNavigationStyle(navigation, true),
|
||||
|
|
|
|||
|
|
@ -200,7 +200,6 @@ ReorderWallets.navigationOptions = ({ navigation, route }) => ({
|
|||
),
|
||||
headerTitle: loc.wallets.reorder_title,
|
||||
headerLeft: null,
|
||||
gestureEnabled: false,
|
||||
});
|
||||
|
||||
export default ReorderWallets;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue