Merge pull request #2385 from BlueWallet/refBlueUseAllFundsButton

REF: BlueUseAllFundsButton hooks

BlueComponents.js

@@ -831,48 +831,6 @@ export const BlueHeader = props => {
 
 export const BlueHeaderDefaultSub = props => {
   const { colors } = useTheme();
-  return (
-    <SafeAreaView style={{ backgroundColor: colors.brandingColor }}>
-      <Header
-        backgroundColor={colors.background}
-        leftContainerStyle={{ minWidth: '100%' }}
-        outerContainerStyles={{
-          borderBottomColor: 'transparent',
-          borderBottomWidth: 0,
-        }}
-        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>
-            </View>
-          </TouchableOpacity>
-        }
-        {...props}
-      />
-    </SafeAreaView>
-  );
-};
-
-export const BlueHeaderDefaultSubHooks = props => {
-  const { colors } = useTheme();
 
   return (
     <SafeAreaView>
@@ -962,30 +920,44 @@ export const BlueSpacing10 = props => {
   return <View {...props} style={{ height: 10, opacity: 0 }} />;
 };
 
-export class BlueUseAllFundsButton extends Component {
-  static InputAccessoryViewID = 'useMaxInputAccessoryViewID';
-  static propTypes = {
-    balance: PropTypes.string.isRequired,
-    canUseAll: PropTypes.bool.isRequired,
-    onUseAllPressed: PropTypes.func.isRequired,
-  };
-
-  render() {
-    const inputView = (
-      <View
-        style={{
-          flex: 1,
-          flexDirection: 'row',
-          maxHeight: 44,
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          backgroundColor: BlueCurrentTheme.colors.inputBackgroundColor,
-        }}
-      >
-        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start' }}>
+export const BlueUseAllFundsButton = ({ balance, canUseAll, onUseAllPressed }) => {
+  const { colors } = useTheme();
+  const inputView = (
+    <View
+      style={{
+        flex: 1,
+        flexDirection: 'row',
+        maxHeight: 44,
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        backgroundColor: colors.inputBackgroundColor,
+      }}
+    >
+      <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start' }}>
+        <Text
+          style={{
+            color: colors.alternativeTextColor,
+            fontSize: 16,
+            marginLeft: 8,
+            marginRight: 0,
+            paddingRight: 0,
+            paddingLeft: 0,
+            paddingTop: 12,
+            paddingBottom: 12,
+          }}
+        >
+          {loc.send.input_total}
+        </Text>
+        {canUseAll ? (
+          <BlueButtonLink
+            onPress={onUseAllPressed}
+            style={{ marginLeft: 8, paddingRight: 0, paddingLeft: 0, paddingTop: 12, paddingBottom: 12 }}
+            title={`${balance} ${BitcoinUnit.BTC}`}
+          />
+        ) : (
           <Text
             style={{
-              color: BlueCurrentTheme.colors.alternativeTextColor,
+              color: colors.alternativeTextColor,
               fontSize: 16,
               marginLeft: 8,
               marginRight: 0,
@@ -995,48 +967,32 @@ export class BlueUseAllFundsButton extends Component {
               paddingBottom: 12,
             }}
           >
-            {loc.send.input_total}
+            {balance} {BitcoinUnit.BTC}
           </Text>
-          {this.props.canUseAll ? (
-            <BlueButtonLink
-              onPress={this.props.onUseAllPressed}
-              style={{ marginLeft: 8, paddingRight: 0, paddingLeft: 0, paddingTop: 12, paddingBottom: 12 }}
-              title={`${this.props.balance} ${BitcoinUnit.BTC}`}
-            />
-          ) : (
-            <Text
-              style={{
-                color: BlueCurrentTheme.colors.alternativeTextColor,
-                fontSize: 16,
-                marginLeft: 8,
-                marginRight: 0,
-                paddingRight: 0,
-                paddingLeft: 0,
-                paddingTop: 12,
-                paddingBottom: 12,
-              }}
-            >
-              {this.props.balance} {BitcoinUnit.BTC}
-            </Text>
-          )}
-        </View>
-        <View style={{ flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end' }}>
-          <BlueButtonLink
-            style={{ paddingRight: 8, paddingLeft: 0, paddingTop: 12, paddingBottom: 12 }}
-            title={loc.send.input_done}
-            onPress={() => Keyboard.dismiss()}
-          />
-        </View>
+        )}
       </View>
-    );
+      <View style={{ flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end' }}>
+        <BlueButtonLink
+          style={{ paddingRight: 8, paddingLeft: 0, paddingTop: 12, paddingBottom: 12 }}
+          title={loc.send.input_done}
+          onPress={Keyboard.dismiss}
+        />
+      </View>
+    </View>
+  );
 
-    if (Platform.OS === 'ios') {
-      return <InputAccessoryView nativeID={BlueUseAllFundsButton.InputAccessoryViewID}>{inputView}</InputAccessoryView>;
-    } else {
-      return <KeyboardAvoidingView style={{ height: 44 }}>{inputView}</KeyboardAvoidingView>;
-    }
+  if (Platform.OS === 'ios') {
+    return <InputAccessoryView nativeID={BlueUseAllFundsButton.InputAccessoryViewID}>{inputView}</InputAccessoryView>;
+  } else {
+    return <KeyboardAvoidingView style={{ height: 44 }}>{inputView}</KeyboardAvoidingView>;
   }
-}
+};
+BlueUseAllFundsButton.InputAccessoryViewID = 'useMaxInputAccessoryViewID';
+BlueUseAllFundsButton.propTypes = {
+  balance: PropTypes.string.isRequired,
+  canUseAll: PropTypes.bool.isRequired,
+  onUseAllPressed: PropTypes.func.isRequired,
+};
 
 export const BlueDismissKeyboardInputAccessory = () => {
   const { colors } = useTheme();

screen/settings/encryptStorage.js

@@ -9,7 +9,7 @@ import {
   BlueSpacing20,
   BlueCard,
   BlueListItem,
-  BlueHeaderDefaultSubHooks,
+  BlueHeaderDefaultSub,
   BlueText,
   BlueNavigationStyle,
 } from '../../BlueComponents';
@@ -157,7 +157,7 @@ const EncryptStorage = () => {
       <ScrollView contentContainerStyle={styles.root}>
         {biometrics.isDeviceBiometricCapable && (
           <>
-            <BlueHeaderDefaultSubHooks leftText={loc.settings.biometrics} rightComponent={null} />
+            <BlueHeaderDefaultSub leftText={loc.settings.biometrics} rightComponent={null} />
             <BlueListItem
               title={loc.formatString(loc.settings.encrypt_use, { type: biometrics.biometricsType })}
               Component={TouchableWithoutFeedback}
@@ -169,7 +169,7 @@ const EncryptStorage = () => {
             <BlueSpacing20 />
           </>
         )}
-        <BlueHeaderDefaultSubHooks leftText={loc.settings.encrypt_tstorage} rightComponent={null} />
+        <BlueHeaderDefaultSub leftText={loc.settings.encrypt_tstorage} rightComponent={null} />
         <BlueListItem
           testID="EncyptedAndPasswordProtected"
           hideChevron

screen/settings/settings.js

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { ScrollView, StyleSheet, StatusBar } from 'react-native';
-import { BlueListItem, BlueNavigationStyle, BlueHeaderDefaultSubHooks } from '../../BlueComponents';
+import { BlueListItem, BlueNavigationStyle, BlueHeaderDefaultSub } from '../../BlueComponents';
 import { useNavigation } from '@react-navigation/native';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
@@ -20,7 +20,7 @@ const Settings = () => {
   return (
     <ScrollView style={styles.root}>
       <StatusBar barStyle="default" />
-      <BlueHeaderDefaultSubHooks leftText={loc.settings.header} rightComponent={null} />
+      <BlueHeaderDefaultSub leftText={loc.settings.header}/>
       <BlueListItem title={loc.settings.general} onPress={() => navigate('GeneralSettings')} chevron />
       <BlueListItem title={loc.settings.currency} onPress={() => navigate('Currency')} chevron />
       <BlueListItem title={loc.settings.language} onPress={() => navigate('Language')} chevron />