mirrors/BlueWallet
1
0
Fork 0
mirror of https://github.com/BlueWallet/BlueWallet.git synced 2025-03-26 08:55:56 +01:00
Code Issues Projects Releases Packages Wiki Activity

REF: wallet details loads UI faster

Browse source
This commit is contained in:
Marcos Rodriguez Velez 2024-05-04 20:14:46 -04:00
parent 538a1327b6
commit 1c8b7df9c8
No known key found for this signature in database
GPG key ID: 6030B2F48CCE86D7
3 changed files with 72 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
Navigation.tsx
View file

@ -88,6 +88,7 @@ import PaymentCode from './screen/wallets/paymentCode';
import PaymentCodesList from './screen/wallets/paymentCodesList';
import { BlueStorageContext } from './blue_modules/storage-context';
import { useIsLargeScreen } from './hooks/useIsLargeScreen';
import { HeaderRightButton } from './components/HeaderRightButton';
const AddWalletStack = createNativeStackNavigator();
const AddWalletRoot = () => {
@ -391,6 +392,11 @@ const DetailViewRoot = createNativeStackNavigator();
const DetailViewStackScreensStack = () => {
const { walletsInitialized } = useContext(BlueStorageContext);
const theme = useTheme();
const SaveButton = useMemo(() => {
return <HeaderRightButton disabled={true} title={loc.wallets.details_save} />;
}, []);
return (
<DetailViewRoot.Navigator
initialRouteName="UnlockWithScreen"
@ -416,7 +422,15 @@ const DetailViewStackScreensStack = () => {
/>
<DetailViewRoot.Screen name="LdkOpenChannel" component={LdkOpenChannel} options={LdkOpenChannel.navigationOptions(theme)} />
<DetailViewRoot.Screen name="LdkInfo" component={LdkInfo} options={LdkInfo.navigationOptions(theme)} />
<DetailViewRoot.Screen name="WalletDetails" component={WalletDetails} options={WalletDetails.navigationOptions(theme)} />
<DetailViewRoot.Screen
name="WalletDetails"
component={WalletDetails}
options={navigationStyle({
headerTitle: loc.wallets.details_title,
statusBarStyle: 'auto',
headerRight: () => SaveButton,
})(theme)}
/>
<DetailViewRoot.Screen name="LdkViewLogs" component={LdkViewLogs} options={LdkViewLogs.navigationOptions(theme)} />
<DetailViewRoot.Screen
name="TransactionDetails"

37
components/HeaderRightButton.tsx Normal file
View file

@ -0,0 +1,37 @@
import { StyleSheet, TouchableOpacity, Text } from 'react-native';
import { useTheme } from './themes';
import React from 'react';
interface HeaderRightButtonProps {
disabled: boolean;
onPress?: () => void;
title: string;
}
export const HeaderRightButton: React.FC<HeaderRightButtonProps> = ({ disabled = true, onPress, title }) => {
const { colors } = useTheme();
return (
<TouchableOpacity
accessibilityRole="button"
disabled={disabled}
style={[styles.save, { backgroundColor: colors.lightButton }]}
onPress={onPress}
>
<Text style={[styles.saveText, { color: colors.buttonTextColor }]}>{title}</Text>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
save: {
alignItems: 'center',
justifyContent: 'center',
width: 80,
borderRadius: 8,
height: 34,
},
saveText: {
fontSize: 15,
fontWeight: '600',
},
});

51
screen/wallets/details.js
View file

@ -1,5 +1,5 @@
import { useRoute } from '@react-navigation/native';
import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import {
ActivityIndicator,
Alert,
@ -43,7 +43,6 @@ import presentAlert from '../../components/Alert';
import Button from '../../components/Button';
import ListItem from '../../components/ListItem';
import { SecondButton } from '../../components/SecondButton';
import navigationStyle from '../../components/navigationStyle';
import { useTheme } from '../../components/themes';
import prompt from '../../helpers/prompt';
import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
@ -174,12 +173,6 @@ const WalletDetails = () => {
backgroundColor: colors.inputBackgroundColor,
},
save: {
backgroundColor: colors.lightButton,
},
saveText: {
color: colors.buttonTextColor,
},
delete: {
color: isToolTipMenuVisible ? colors.buttonDisabledTextColor : '#d0021b',
},
@ -190,7 +183,7 @@ const WalletDetails = () => {
}
}, [wallet]);
const save = () => {
const handleSave = useCallback(() => {
setIsLoading(true);
if (walletName.trim().length > 0) {
wallet.setLabel(walletName.trim());
@ -211,25 +204,27 @@ const WalletDetails = () => {
console.log(error.message);
setIsLoading(false);
});
};
}, [walletName, saveToDisk, wallet, hideTransactionsInWalletsList, useWithHardwareWallet, isBIP47Enabled, goBack]);
useLayoutEffect(() => {
const HeaderRightButton = useMemo(
() => (
<TouchableOpacity
accessibilityRole="button"
disabled={isLoading}
style={[styles.save, { backgroundColor: colors.lightButton }]}
onPress={handleSave}
>
<Text style={[styles.saveText, { color: colors.buttonTextColor }]}>{loc.wallets.details_save}</Text>
</TouchableOpacity>
),
[isLoading, colors.lightButton, colors.buttonTextColor, handleSave],
);
useEffect(() => {
setOptions({
// eslint-disable-next-line react/no-unstable-nested-components
headerRight: () => (
<TouchableOpacity
accessibilityRole="button"
testID="Save"
disabled={isLoading || isToolTipMenuVisible}
style={[styles.save, stylesHook.save]}
onPress={save}
>
<Text style={[styles.saveText, stylesHook.saveText]}>{loc.wallets.details_save}</Text>
</TouchableOpacity>
),
headerRight: () => HeaderRightButton,
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isLoading, colors, walletName, useWithHardwareWallet, hideTransactionsInWalletsList, isBIP47Enabled, isToolTipMenuVisible]);
}, [HeaderRightButton, setOptions]);
useEffect(() => {
if (wallets.some(w => w.getID() === walletID)) {
@ -761,10 +756,4 @@ const WalletDetails = () => {
);
};
WalletDetails.navigationOptions = navigationStyle({}, opts => ({
...opts,
headerTitle: loc.wallets.details_title,
statusBarStyle: 'auto',
}));
export default WalletDetails;