REF: WalletButton to TSX (#6346)

BlueComponents.js

@@ -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.
  *

components/WalletButton.tsx

@@ -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;

screen/wallets/add.tsx

@@ -5,6 +5,7 @@ import {
   ActivityIndicator,
   Keyboard,
   KeyboardAvoidingView,
+  LayoutAnimation,
   Platform,
   ScrollView,
   StyleSheet,
@@ -14,16 +15,7 @@ import {
   useColorScheme,
 } from 'react-native';
 
-import {
+import { BlueButtonLink, BlueFormLabel, BlueSpacing20, BlueSpacing40, BlueText } from '../../BlueComponents';
-  BitcoinButton,
-  BlueButtonLink,
-  BlueFormLabel,
-  BlueSpacing20,
-  BlueSpacing40,
-  BlueText,
-  LightningButton,
-  VaultButton,
-} 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>