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

REF: WalletButton to TSX (#6346)

Browse source
This commit is contained in:
Marcos Rodriguez Vélez 2024-04-03 12:24:31 -04:00 • committed by GitHub
parent 0e8194cc8f
commit 6f83bc1709
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 131 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

135
BlueComponents.js
View file

@ -5,7 +5,6 @@ import { Icon, Text, Header } from 'react-native-elements';
import {
ActivityIndicator,
Dimensions,
Image,
InputAccessoryView,
Keyboard,
KeyboardAvoidingView,
@ -33,140 +32,6 @@ if (aspectRatio > 1.6) {
isIpad = true;
}
export const BitcoinButton = props => {
const { colors } = useTheme();
return (
<TouchableOpacity accessibilityRole="button" testID={props.testID} onPress={props.onPress}>
<View
style={{
borderColor: (props.active && colors.newBlue) || colors.buttonDisabledBackgroundColor,
borderWidth: 1.5,
borderRadius: 8,
backgroundColor: colors.buttonDisabledBackgroundColor,
minWidth: props.style.width,
minHeight: props.style.height,
height: props.style.height,
flex: 1,
marginBottom: 8,
}}
>
<View style={{ marginHorizontal: 16, marginVertical: 10, flexDirection: 'row', alignItems: 'center' }}>
<View>
<Image style={{ width: 34, height: 34, marginRight: 8 }} source={require('./img/addWallet/bitcoin.png')} />
</View>
<View style={{ flex: 1 }}>
<Text style={{ color: colors.newBlue, fontWeight: 'bold', fontSize: 18, writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr' }}>
{loc.wallets.add_bitcoin}
</Text>
<Text
style={{
color: colors.alternativeTextColor,
fontSize: 13,
fontWeight: '500',
writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
}}
>
{loc.wallets.add_bitcoin_explain}
</Text>
</View>
</View>
</View>
</TouchableOpacity>
);
};
export const VaultButton = props => {
const { colors } = useTheme();
return (
<TouchableOpacity accessibilityRole="button" testID={props.testID} onPress={props.onPress}>
<View
style={{
borderColor: (props.active && colors.foregroundColor) || colors.buttonDisabledBackgroundColor,
borderWidth: 1.5,
borderRadius: 8,
backgroundColor: colors.buttonDisabledBackgroundColor,
minWidth: props.style.width,
minHeight: props.style.height,
height: props.style.height,
flex: 1,
}}
>
<View style={{ marginHorizontal: 16, marginVertical: 10, flexDirection: 'row', alignItems: 'center' }}>
<View>
<Image style={{ width: 34, height: 34, marginRight: 8 }} source={require('./img/addWallet/vault.png')} />
</View>
<View style={{ flex: 1 }}>
<Text
style={{
color: colors.foregroundColor,
fontWeight: 'bold',
fontSize: 18,
writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
}}
>
{loc.multisig.multisig_vault}
</Text>
<Text
style={{
color: colors.alternativeTextColor,
fontSize: 13,
fontWeight: '500',
writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
}}
>
{loc.multisig.multisig_vault_explain}
</Text>
</View>
</View>
</View>
</TouchableOpacity>
);
};
export const LightningButton = props => {
const { colors } = useTheme();
return (
<TouchableOpacity accessibilityRole="button" onPress={props.onPress}>
<View
style={{
borderColor: (props.active && colors.lnborderColor) || colors.buttonDisabledBackgroundColor,
borderWidth: 1.5,
borderRadius: 8,
backgroundColor: colors.buttonDisabledBackgroundColor,
minWidth: props.style.width,
minHeight: props.style.height,
height: props.style.height,
flex: 1,
marginBottom: 8,
}}
>
<View style={{ marginHorizontal: 16, marginVertical: 10, flexDirection: 'row', alignItems: 'center' }}>
<View>
<Image style={{ width: 34, height: 34, marginRight: 8 }} source={require('./img/addWallet/lightning.png')} />
</View>
<View style={{ flex: 1 }}>
<Text
style={{ color: colors.lnborderColor, fontWeight: 'bold', fontSize: 18, writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr' }}
>
{loc.wallets.add_lightning}
</Text>
<Text
style={{
color: colors.alternativeTextColor,
fontSize: 13,
fontWeight: '500',
writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
}}
>
{loc.wallets.add_lightning_explain}
</Text>
</View>
</View>
</View>
</TouchableOpacity>
);
};
/**
* TODO: remove this comment once this file gets properly converted to typescript.
*

115
components/WalletButton.tsx Normal file
View file

@ -0,0 +1,115 @@
import React from 'react';
import { TouchableOpacity, View, Text, Image, I18nManager, StyleSheet, ImageSourcePropType, DimensionValue } from 'react-native';
import { Theme, useTheme } from './themes';
import loc from '../loc';
interface ButtonDetails {
image: ImageSourcePropType;
title: string;
explain: string;
borderColorActive: keyof Theme['colors'];
}
interface WalletButtonProps {
buttonType: keyof typeof buttonDetails;
testID?: string;
onPress: () => void;
size: {
width: DimensionValue | undefined;
height: DimensionValue | undefined;
};
active: boolean;
}
const buttonDetails: Record<string, ButtonDetails> = {
Bitcoin: {
image: require('../img/addWallet/bitcoin.png'),
title: loc.wallets.add_bitcoin,
explain: loc.wallets.add_bitcoin_explain,
borderColorActive: 'newBlue',
},
Vault: {
image: require('../img/addWallet/vault.png'),
title: loc.multisig.multisig_vault,
explain: loc.multisig.multisig_vault_explain,
borderColorActive: 'foregroundColor',
},
Lightning: {
image: require('../img/addWallet/lightning.png'),
title: loc.wallets.add_lightning,
explain: loc.wallets.add_lightning_explain,
borderColorActive: 'lnborderColor',
},
};
const WalletButton: React.FC<WalletButtonProps> = ({ buttonType, testID, onPress, size, active }) => {
const details = buttonDetails[buttonType];
const { colors } = useTheme();
const borderColor = active ? colors[details.borderColorActive] : colors.buttonDisabledBackgroundColor;
const dynamicStyles = StyleSheet.create({
buttonContainer: {
borderColor,
backgroundColor: colors.buttonDisabledBackgroundColor,
minWidth: size.width,
minHeight: size.height,
height: size.height,
},
textTitle: {
color: colors[details.borderColorActive],
},
textExplain: {
color: colors.alternativeTextColor,
},
});
return (
<TouchableOpacity accessibilityRole="button" testID={testID} onPress={onPress} style={styles.touchable}>
<View style={[styles.container, dynamicStyles.buttonContainer]}>
<View style={styles.content}>
<Image style={styles.image} source={details.image} />
<View style={styles.textContainer}>
<Text style={[styles.textTitle, dynamicStyles.textTitle]}>{details.title}</Text>
<Text style={[styles.textExplain, dynamicStyles.textExplain]}>{details.explain}</Text>
</View>
</View>
</View>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
touchable: {
flex: 1,
marginBottom: 8,
},
container: {
borderWidth: 1.5,
borderRadius: 8,
},
content: {
marginHorizontal: 16,
marginVertical: 10,
flexDirection: 'row',
alignItems: 'center',
},
image: {
width: 34,
height: 34,
marginRight: 8,
},
textContainer: {
flex: 1,
},
textTitle: {
fontWeight: 'bold',
fontSize: 18,
writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
},
textExplain: {
fontSize: 13,
fontWeight: '500',
writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
},
});
export default WalletButton;

32
screen/wallets/add.tsx
View file

@ -5,6 +5,7 @@ import {
ActivityIndicator,
Keyboard,
KeyboardAvoidingView,
LayoutAnimation,
Platform,
ScrollView,
StyleSheet,
@ -14,16 +15,7 @@ import {
useColorScheme,
} from 'react-native';
import {
BitcoinButton,
BlueButtonLink,
BlueFormLabel,
BlueSpacing20,
BlueSpacing40,
BlueText,
LightningButton,
VaultButton,
} from '../../BlueComponents';
import { BlueButtonLink, BlueFormLabel, BlueSpacing20, BlueSpacing40, BlueText } from '../../BlueComponents';
import triggerHapticFeedback, { HapticFeedbackTypes } from '../../blue_modules/hapticFeedback';
import { BlueStorageContext } from '../../blue_modules/storage-context';
import { HDSegwitBech32Wallet, HDSegwitP2SHWallet, LightningCustodianWallet, LightningLdkWallet, SegwitP2SHWallet } from '../../class';
@ -36,6 +28,7 @@ import useAsyncPromise from '../../hooks/useAsyncPromise';
import loc from '../../loc';
import { Chain } from '../../models/bitcoinUnits';
import { AppStorage } from '../../BlueApp';
import WalletButton from '../../components/WalletButton';
import A from '../../blue_modules/analytics';
enum ButtonSelected {
@ -345,16 +338,19 @@ const WalletsAdd: React.FC = () => {
};
const handleOnVaultButtonPressed = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
Keyboard.dismiss();
setSelectedWalletType(ButtonSelected.VAULT);
};
const handleOnBitcoinButtonPressed = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
Keyboard.dismiss();
setSelectedWalletType(ButtonSelected.ONCHAIN);
};
const handleOnLightningButtonPressed = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
// @ts-ignore: Return later to update
setBackdoorPressed((prevState: number) => {
return prevState + 1;
@ -364,6 +360,7 @@ const WalletsAdd: React.FC = () => {
};
const handleOnLdkButtonPressed = async () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
Keyboard.dismiss();
setSelectedWalletType(ButtonSelected.LDK);
};
@ -387,16 +384,18 @@ const WalletsAdd: React.FC = () => {
</View>
<BlueFormLabel>{loc.wallets.add_wallet_type}</BlueFormLabel>
<View style={styles.buttons}>
<BitcoinButton
<WalletButton
buttonType="Bitcoin"
testID="ActivateBitcoinButton"
active={selectedWalletType === ButtonSelected.ONCHAIN}
onPress={handleOnBitcoinButtonPressed}
style={styles.button}
size={styles.button}
/>
<LightningButton
<WalletButton
buttonType="Lightning"
active={selectedWalletType === ButtonSelected.OFFCHAIN}
onPress={handleOnLightningButtonPressed}
style={styles.button}
size={styles.button}
/>
{backdoorPressed > 10 ? (
<LdkButton
@ -407,11 +406,12 @@ const WalletsAdd: React.FC = () => {
text="LDK"
/>
) : null}
<VaultButton
<WalletButton
buttonType="Vault"
testID="ActivateVaultButton"
active={selectedWalletType === ButtonSelected.VAULT}
onPress={handleOnVaultButtonPressed}
style={styles.button}
size={styles.button}
/>
</View>