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

REF: Refactor some BlueComponents

Browse Source
This commit is contained in:
marcosrdz 2020-11-29 23:18:54 -05:00
parent 0f99b867f3
commit cb88714592
12 changed files with 140 additions and 276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

358
BlueComponents.js
View File

@ -8,7 +8,6 @@ import {
Alert,
Animated,
Dimensions,
FlatList,
Image,
InputAccessoryView,
Keyboard,
@ -458,17 +457,15 @@ export class BlueWalletNavigationHeader extends Component {
}
}
export const BlueButtonLinkHook = props => {
export const BlueButtonLink = props => {
const { colors } = useTheme();
return (
<TouchableOpacity
style={{
minHeight: 60,
minWidth: 100,
height: 60,
justifyContent: 'center',
}}
onPress={props.onPress}
{...props}
>
<Text style={{ color: colors.foregroundColor, textAlign: 'center', fontSize: 16 }}>{props.title}</Text>
@ -476,23 +473,6 @@ export const BlueButtonLinkHook = props => {
);
};
export class BlueButtonLink extends Component {
render() {
return (
<TouchableOpacity
style={{
minHeight: 60,
minWidth: 100,
justifyContent: 'center',
}}
{...this.props}
>
<Text style={{ color: BlueCurrentTheme.colors.foregroundColor, textAlign: 'center', fontSize: 16 }}>{this.props.title}</Text>
</TouchableOpacity>
);
}
}
export const BlueAlertWalletExportReminder = ({ onSuccess = () => {}, onFailure }) => {
Alert.alert(
loc.wallets.details_title,
@ -546,6 +526,8 @@ export const BlueNavigationStyle = (navigation, withNavigationCloseButton = fals
};
export const BlueCreateTxNavigationStyle = (navigation, withAdvancedOptionsMenuButton = false, advancedOptionsMenuButtonAction) => {
const { colors, closeImage } = useTheme();
let headerRight;
if (withAdvancedOptionsMenuButton) {
headerRight = () => (
@ -554,7 +536,7 @@ export const BlueCreateTxNavigationStyle = (navigation, withAdvancedOptionsMenuB
onPress={advancedOptionsMenuButtonAction}
testID="advancedOptionsMenuButton"
>
<Icon size={22} name="kebab-horizontal" type="octicon" color={BlueCurrentTheme.colors.foregroundColor} />
<Icon size={22} name="kebab-horizontal" type="octicon" color={colors.foregroundColor} />
</TouchableOpacity>
);
} else {
@ -568,9 +550,9 @@ export const BlueCreateTxNavigationStyle = (navigation, withAdvancedOptionsMenuB
},
headerTitleStyle: {
fontWeight: '600',
color: BlueCurrentTheme.colors.foregroundColor,
color: colors.foregroundColor,
},
headerTintColor: BlueCurrentTheme.colors.foregroundColor,
headerTintColor: colors.foregroundColor,
headerLeft: () => (
<TouchableOpacity
style={{ minWidth: 40, height: 40, justifyContent: 'center', paddingHorizontal: 14 }}
@ -579,7 +561,7 @@ export const BlueCreateTxNavigationStyle = (navigation, withAdvancedOptionsMenuB
navigation.goBack(null);
}}
>
<Image style={{}} source={BlueCurrentTheme.closeImage} />
<Image style={{}} source={closeImage} />
</TouchableOpacity>
),
headerRight,
@ -675,11 +657,9 @@ export const SafeBlueArea = props => {
return <SafeAreaView forceInset={{ horizontal: 'always' }} style={{ flex: 1, backgroundColor: colors.background }} {...props} />;
};
export class BlueCard extends Component {
render() {
return <View {...this.props} style={{ padding: 20 }} />;
}
}
export const BlueCard = props => {
return <View {...props} style={{ padding: 20 }} />;
};
export const BlueText = props => {
const { colors } = useTheme();
@ -760,122 +740,111 @@ export const BlueFormLabel = props => {
return <Text {...props} style={{ color: colors.foregroundColor, fontWeight: '400', marginHorizontal: 20 }} />;
};
export class BlueFormInput extends Component {
render() {
return (
<Input
{...this.props}
inputStyle={{ color: BlueCurrentTheme.colors.foregroundColor, maxWidth: width - 105 }}
containerStyle={{
marginTop: 5,
borderColor: BlueCurrentTheme.colors.inputBorderColor,
borderBottomColor: BlueCurrentTheme.colors.inputBorderColor,
borderWidth: 0.5,
borderBottomWidth: 0.5,
backgroundColor: BlueCurrentTheme.colors.inputBackgroundColor,
}}
/>
);
}
}
export const BlueFormInput = props => {
const { colors } = useTheme();
return (
<Input
{...props}
inputStyle={{ color: colors.foregroundColor, maxWidth: width - 105 }}
containerStyle={{
marginTop: 5,
borderColor: colors.inputBorderColor,
borderBottomColor: colors.inputBorderColor,
borderWidth: 0.5,
borderBottomWidth: 0.5,
backgroundColor: colors.inputBackgroundColor,
}}
/>
);
};
export class BlueFormMultiInput extends Component {
constructor(props) {
super(props);
this.state = {
selection: { start: 0, end: 0 },
};
}
export const BlueFormMultiInput = props => {
const { colors } = useTheme();
render() {
return (
<TextInput
multiline
underlineColorAndroid="transparent"
numberOfLines={4}
style={{
paddingHorizontal: 8,
paddingVertical: 16,
flex: 1,
marginTop: 5,
marginHorizontal: 20,
borderColor: BlueCurrentTheme.colors.formBorder,
borderBottomColor: BlueCurrentTheme.colors.formBorder,
borderWidth: 1,
borderBottomWidth: 0.5,
borderRadius: 4,
backgroundColor: BlueCurrentTheme.colors.inputBackgroundColor,
color: BlueCurrentTheme.colors.foregroundColor,
textAlignVertical: 'top',
}}
autoCorrect={false}
autoCapitalize="none"
spellCheck={false}
{...this.props}
selectTextOnFocus={false}
keyboardType={Platform.OS === 'android' ? 'visible-password' : 'default'}
/>
);
}
}
return (
<TextInput
multiline
underlineColorAndroid="transparent"
numberOfLines={4}
style={{
paddingHorizontal: 8,
paddingVertical: 16,
flex: 1,
marginTop: 5,
marginHorizontal: 20,
borderColor: colors.formBorder,
borderBottomColor: colors.formBorder,
borderWidth: 1,
borderBottomWidth: 0.5,
borderRadius: 4,
backgroundColor: colors.inputBackgroundColor,
color: colors.foregroundColor,
textAlignVertical: 'top',
}}
autoCorrect={false}
autoCapitalize="none"
spellCheck={false}
{...props}
selectTextOnFocus={false}
keyboardType={Platform.OS === 'android' ? 'visible-password' : 'default'}
/>
);
};
export class BlueHeader extends Component {
render() {
return (
export const BlueHeader = props => {
return (
<Header
{...props}
backgroundColor="transparent"
outerContainerStyles={{
borderBottomColor: 'transparent',
borderBottomWidth: 0,
}}
/>
);
};
export const BlueHeaderDefaultSub = props => {
const { colors } = useTheme();
return (
<SafeAreaView style={{ backgroundColor: colors.brandingColor }}>
<Header
{...this.props}
backgroundColor="transparent"
backgroundColor={colors.background}
leftContainerStyle={{ minWidth: '100%' }}
outerContainerStyles={{
borderBottomColor: 'transparent',
borderBottomWidth: 0,
}}
/>
);
}
}
export class BlueHeaderDefaultSub extends Component {
render() {
return (
<SafeAreaView style={{ backgroundColor: BlueCurrentTheme.colors.brandingColor }}>
<Header
backgroundColor={BlueCurrentTheme.colors.background}
leftContainerStyle={{ minWidth: '100%' }}
outerContainerStyles={{
borderBottomColor: 'transparent',
borderBottomWidth: 0,
}}
leftComponent={
<Text
adjustsFontSizeToFit
style={{
fontWeight: 'bold',
fontSize: 30,
color: BlueCurrentTheme.colors.foregroundColor,
}}
>
{this.props.leftText}
</Text>
}
rightComponent={
<TouchableOpacity
onPress={() => {
if (this.props.onClose) this.props.onClose();
}}
>
<View style={stylesBlueIcon.box}>
<View style={stylesBlueIcon.ballTransparrent}>
<Image source={require('./img/close.png')} />
</View>
leftComponent={
<Text
adjustsFontSizeToFit
style={{
fontWeight: 'bold',
fontSize: 30,
color: colors.foregroundColor,
}}
>
{props.leftText}
</Text>
}
rightComponent={
<TouchableOpacity
onPress={() => {
if (props.onClose) props.onClose();
}}
>
<View style={stylesBlueIcon.box}>
<View style={stylesBlueIcon.ballTransparrent}>
<Image source={require('./img/close.png')} />
</View>
</TouchableOpacity>
}
{...this.props}
/>
</SafeAreaView>
);
}
}
</View>
</TouchableOpacity>
}
{...props}
/>
</SafeAreaView>
);
};
export const BlueHeaderDefaultSubHooks = props => {
const { colors } = useTheme();
@ -938,11 +907,9 @@ export const BlueHeaderDefaultMain = props => {
);
};
export class BlueSpacing extends Component {
render() {
return <View {...this.props} style={{ height: 60 }} />;
}
}
export const BlueSpacing = props => {
return <View {...props} style={{ height: 60 }} />;
};
export const BlueSpacing40 = props => {
return <View {...props} style={{ height: 50 }} />;
@ -972,12 +939,6 @@ export const BlueSpacing10 = props => {
return <View {...props} style={{ height: 10, opacity: 0 }} />;
};
export class BlueList extends Component {
render() {
return <FlatList {...this.props} />;
}
}
export class BlueUseAllFundsButton extends Component {
static InputAccessoryViewID = 'useMaxInputAccessoryViewID';
static propTypes = {
@ -1110,19 +1071,9 @@ export class BlueDoneAndDismissKeyboardInputAccessory extends Component {
}
}
export class BlueLoading extends Component {
render() {
return (
<View style={{ flex: 1, paddingTop: 200 }} {...this.props}>
<ActivityIndicator />
</View>
);
}
}
export const BlueLoadingHook = () => {
export const BlueLoading = props => {
return (
<View style={{ flex: 1, paddingTop: 200 }}>
<View style={{ flex: 1, paddingTop: 200 }} {...props}>
<ActivityIndicator />
</View>
);
@ -1421,93 +1372,6 @@ export const BlueReceiveButtonIcon = props => {
);
};
export class BlueScanButton extends Component {
render() {
return (
<TouchableOpacity {...this.props} style={{ flex: 1 }}>
<View
style={{
flex: 1,
minWidth: 130,
backgroundColor: BlueCurrentTheme.colors.buttonBackgroundColor,
}}
>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
<View
style={{
minWidth: 24,
minHeight: 30,
backgroundColor: 'transparent',
alignItems: 'center',
marginBottom: -15,
marginLeft: -8,
}}
>
<Image resizeMode="stretch" source={BlueCurrentTheme.scanImage} />
</View>
<Text
style={{
color: BlueCurrentTheme.colors.buttonAlternativeTextColor,
fontSize: sendReceiveScanButtonFontSize,
fontWeight: '600',
left: 5,
backgroundColor: 'transparent',
}}
>
{loc.send.details_scan}
</Text>
</View>
</View>
</TouchableOpacity>
);
}
}
export class BlueSendButtonIcon extends Component {
render() {
return (
<TouchableOpacity {...this.props} testID="SendButton" style={{ flex: 1 }}>
<View
style={{
flex: 1,
backgroundColor: BlueCurrentTheme.colors.buttonBackgroundColor,
alignItems: 'center',
}}
>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
<View
style={{
left: 5,
backgroundColor: 'transparent',
transform: [{ rotate: '225deg' }],
marginRight: 8,
}}
>
<Icon
{...this.props}
name="arrow-down"
size={sendReceiveScanButtonFontSize}
type="font-awesome"
color={BlueCurrentTheme.colors.buttonAlternativeTextColor}
/>
</View>
<Text
style={{
color: BlueCurrentTheme.colors.buttonAlternativeTextColor,
fontSize: sendReceiveScanButtonFontSize,
fontWeight: '500',
backgroundColor: 'transparent',
}}
>
{loc.send.header}
</Text>
</View>
</View>
</TouchableOpacity>
);
}
}
export const BlueTransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUnit.BTC, timeElapsed }) => {
const [subtitleNumberOfLines, setSubtitleNumberOfLines] = useState(1);
const { colors } = useTheme();

8
screen/receive/details.js
View File

@ -16,11 +16,11 @@ import Share from 'react-native-share';
import Handoff from 'react-native-handoff';
import {
BlueLoadingHook,
BlueLoading,
BlueCopyTextToClipboard,
BlueButton,
SecondButton,
BlueButtonLinkHook,
BlueButtonLink,
is,
BlueBitcoinAmount,
BlueText,
@ -161,7 +161,7 @@ const ReceiveDetails = () => {
<BlueCopyTextToClipboard text={isCustom ? bip21encoded : address} />
</View>
<View style={styles.share}>
<BlueButtonLinkHook title={loc.receive.details_setAmount} onPress={showCustomAmountModal} />
<BlueButtonLink title={loc.receive.details_setAmount} onPress={showCustomAmountModal} />
<View>
<SecondButton onPress={handleShareButtonPressed} title={loc.receive.details_share} />
</View>
@ -345,7 +345,7 @@ const ReceiveDetails = () => {
url={`https://blockstream.info/address/${address}`}
/>
)}
{showAddress ? renderReceiveDetails() : <BlueLoadingHook />}
{showAddress ? renderReceiveDetails() : <BlueLoading />}
</View>
);
};

4
screen/selftest.js
View File

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import { ScrollView, View, StyleSheet } from 'react-native';
import { BlueSpacing20, SafeBlueArea, BlueCard, BlueText, BlueNavigationStyle, BlueLoadingHook } from '../BlueComponents';
import { BlueSpacing20, SafeBlueArea, BlueCard, BlueText, BlueNavigationStyle, BlueLoading } from '../BlueComponents';
import PropTypes from 'prop-types';
import { SegwitP2SHWallet, LegacyWallet, HDSegwitP2SHWallet, HDSegwitBech32Wallet } from '../class';
import { BlueCurrentTheme } from '../components/themes';
@ -210,7 +210,7 @@ export default class Selftest extends Component {
render() {
if (this.state.isLoading) {
return <BlueLoadingHook />;
return <BlueLoading />;
}
return (

4
screen/send/ScanQRCode.js
View File

@ -7,7 +7,7 @@ import ImagePicker from 'react-native-image-picker';
import { decodeUR, extractSingleWorkload } from 'bc-ur';
import { useNavigation, useRoute, useIsFocused, useTheme } from '@react-navigation/native';
import loc from '../../loc';
import { BlueLoadingHook, BlueText, BlueButton, BlueSpacing40 } from '../../BlueComponents';
import { BlueLoading, BlueText, BlueButton, BlueSpacing40 } from '../../BlueComponents';
import { BlueCurrentTheme } from '../../components/themes';
import { openPrivacyDesktopSettings } from '../../class/camera';
const LocalQRCode = require('@remobile/react-native-qrcode-local-image');
@ -231,7 +231,7 @@ const ScanQRCode = () => {
return isLoading ? (
<View style={styles.root}>
<BlueLoadingHook />
<BlueLoading />
</View>
) : (
<View style={styles.root}>

4
screen/settings/encryptStorage.js
View File

@ -4,7 +4,7 @@ import { ScrollView, Alert, Platform, TouchableOpacity, TouchableWithoutFeedback
import { useNavigation } from '@react-navigation/native';
import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
import {
BlueLoadingHook,
BlueLoading,
SafeBlueArea,
BlueSpacing20,
BlueCard,
@ -149,7 +149,7 @@ const EncryptStorage = () => {
return isLoading ? (
<SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.root}>
<BlueLoadingHook />
<BlueLoading />
</SafeBlueArea>
) : (
<SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.root}>

4
screen/settings/language.js
View File

@ -1,6 +1,6 @@
import React, { useState, useEffect, useCallback } from 'react';
import { FlatList, StyleSheet } from 'react-native';
import { SafeBlueArea, BlueListItem, BlueCard, BlueLoadingHook, BlueNavigationStyle, BlueText } from '../../BlueComponents';
import { SafeBlueArea, BlueListItem, BlueCard, BlueLoading, BlueNavigationStyle, BlueText } from '../../BlueComponents';
import { AvailableLanguages } from '../../loc/languages';
import loc from '../../loc';
@ -40,7 +40,7 @@ const Language = () => {
);
return isLoading ? (
<BlueLoadingHook />
<BlueLoading />
) : (
<SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.flex}>
<FlatList style={styles.flex} keyExtractor={(_item, index) => `${index}`} data={AvailableLanguages} renderItem={renderItem} />

4
screen/settings/licensing.js
View File

@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import { SafeBlueArea, BlueCard, BlueText, BlueNavigationStyle, BlueSpacing20, BlueLoadingHook } from '../../BlueComponents';
import { SafeBlueArea, BlueCard, BlueText, BlueNavigationStyle, BlueSpacing20, BlueLoading } from '../../BlueComponents';
/** @type {AppStorage} */
const styles = StyleSheet.create({
@ -17,7 +17,7 @@ const Licensing = () => {
}, []);
return isLoading ? (
<BlueLoadingHook />
<BlueLoading />
) : (
<SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.root}>
<ScrollView>

4
screen/settings/lightningSettings.js
View File

@ -11,7 +11,7 @@ import {
SafeBlueArea,
BlueCard,
BlueNavigationStyle,
BlueLoadingHook,
BlueLoading,
BlueText,
BlueButtonLink,
} from '../../BlueComponents';
@ -130,7 +130,7 @@ const LightningSettings = () => {
<BlueButtonLink title={loc.wallets.import_scan_qr} onPress={importScan} />
<BlueSpacing20 />
{isLoading ? <BlueLoadingHook /> : <BlueButton onPress={save} title={loc.settings.save} />}
{isLoading ? <BlueLoading /> : <BlueButton onPress={save} title={loc.settings.save} />}
</BlueCard>
</SafeBlueArea>
);

6
screen/wallets/add.js
View File

@ -22,7 +22,7 @@ import {
BlueFormLabel,
BlueButton,
BlueNavigationStyle,
BlueButtonLinkHook,
BlueButtonLink,
BlueSpacing20,
} from '../../BlueComponents';
import { HDSegwitBech32Wallet, SegwitP2SHWallet, HDSegwitP2SHWallet, LightningCustodianWallet, AppStorage } from '../../class';
@ -310,7 +310,7 @@ const WalletsAdd = () => {
}
})()}
{isAdvancedOptionsEnabled && selectedWalletType === ButtonSelected.ONCHAIN && !isLoading && (
<BlueButtonLinkHook style={styles.import} title={entropyButtonText} onPress={navigateToEntropy} />
<BlueButtonLink style={styles.import} title={entropyButtonText} onPress={navigateToEntropy} />
)}
<BlueSpacing20 />
<View style={styles.createButton}>
@ -321,7 +321,7 @@ const WalletsAdd = () => {
)}
</View>
{!isLoading && (
<BlueButtonLinkHook
<BlueButtonLink
testID="ImportWallet"
style={styles.import}
title={loc.wallets.add_import_wallet}

8
screen/wallets/addMultisigStep2.js
View File

@ -15,9 +15,9 @@ import {
} from 'react-native';
import {
BlueButton,
BlueButtonLinkHook,
BlueButtonLink,
BlueFormMultiInput,
BlueLoadingHook,
BlueLoading,
BlueNavigationStyle,
BlueSpacing10,
BlueSpacing20,
@ -572,7 +572,7 @@ const WalletsAddMultisigStep2 = () => {
) : (
<BlueButton disabled={importText.trim().length === 0} title={loc.wallets.import_do_import} onPress={useMnemonicPhrase} />
)}
<BlueButtonLinkHook disabled={isLoading} onPress={scanOrOpenFile} title={loc.wallets.import_scan_qr} />
<BlueButtonLink disabled={isLoading} onPress={scanOrOpenFile} title={loc.wallets.import_scan_qr} />
</View>
</KeyboardAvoidingView>
</BottomModal>
@ -620,7 +620,7 @@ const WalletsAddMultisigStep2 = () => {
);
};
const footer = isLoading ? (
<BlueLoadingHook />
<BlueLoading />
) : (
<View style={styles.buttonBottom}>
<BlueButton title={loc.multisig.create} onPress={onCreate} disabled={!isOnCreateButtonEnabled} />

4
screen/wallets/details.js
View File

@ -16,7 +16,7 @@ import {
StatusBar,
PermissionsAndroid,
} from 'react-native';
import { SecondButton, SafeBlueArea, BlueCard, BlueSpacing20, BlueNavigationStyle, BlueText, BlueLoadingHook } from '../../BlueComponents';
import { SecondButton, SafeBlueArea, BlueCard, BlueSpacing20, BlueNavigationStyle, BlueText, BlueLoading } from '../../BlueComponents';
import { LightningCustodianWallet } from '../../class/wallets/lightning-custodian-wallet';
import { HDLegacyBreadwalletWallet } from '../../class/wallets/hd-legacy-breadwallet-wallet';
import { HDLegacyP2PKHWallet } from '../../class/wallets/hd-legacy-p2pkh-wallet';
@ -368,7 +368,7 @@ const WalletDetails = () => {
return isLoading ? (
<View style={styles.root}>
<BlueLoadingHook />
<BlueLoading />
</View>
) : (
<SafeBlueArea style={styles.root}>

8
screen/wallets/viewEditMultisigCosigners.js
View File

@ -22,9 +22,9 @@ import ImagePicker from 'react-native-image-picker';
import {
BlueButton,
BlueButtonLinkHook,
BlueButtonLink,
BlueFormMultiInput,
BlueLoadingHook,
BlueLoading,
BlueNavigationStyle,
BlueSpacing10,
BlueSpacing20,
@ -441,7 +441,7 @@ const ViewEditMultisigCosigners = () => {
onPress={handleUseMnemonicPhrase}
/>
)}
<BlueButtonLinkHook disabled={isLoading} onPress={scanOrOpenFile} title={loc.wallets.import_scan_qr} />
<BlueButtonLink disabled={isLoading} onPress={scanOrOpenFile} title={loc.wallets.import_scan_qr} />
</View>
</KeyboardAvoidingView>
</BottomModal>
@ -451,7 +451,7 @@ const ViewEditMultisigCosigners = () => {
if (isLoading)
return (
<SafeAreaView style={[styles.root, stylesHook.root]}>
<BlueLoadingHook />
<BlueLoading />
</SafeAreaView>
);