[Issue-815] Refactor code

src/hooks/account/usePreCheckAction.ts

@@ -20,7 +20,7 @@ const usePreCheckAction = (
   address?: string,
   blockAllAccount = true,
   message?: string,
-): ((onClick: VoidFunction, action: ExtrinsicType) => VoidFunction) => {
+): ((onPress: VoidFunction, action: ExtrinsicType) => VoidFunction) => {
   const { show, hideAll } = useToast();
 
   const account = useGetAccountByAddress(address);
@@ -46,7 +46,7 @@ const usePreCheckAction = (
   }, []);
 
   return useCallback(
-    (onClick: VoidFunction, action: ExtrinsicType) => {
+    (onPress: VoidFunction, action: ExtrinsicType) => {
       return () => {
         if (!account) {
           hideAll();
@@ -106,7 +106,7 @@ const usePreCheckAction = (
           }
 
           if (!block) {
-            onClick();
+            onPress();
           } else {
             hideAll();
             show((message || defaultMessage).replace('{{accountTitle}}', accountTitle));

src/screens/Transaction/SendFundV2/Amount.tsx

@@ -56,6 +56,7 @@ const Component = (props: InputAmountProps, ref: ForwardedRef<any>) => {
     onSideEffectChange,
     value = '',
     inputStyle,
+    containerStyle,
     ...inputProps
   } = props;
   const stylesheet = createStylesheet(theme);
@@ -153,6 +154,7 @@ const Component = (props: InputAmountProps, ref: ForwardedRef<any>) => {
         maxLength={getMaxLengthText(inputValue)}
         {...inputProps}
         inputStyle={[stylesheet.input, inputStyle]}
+        containerStyle={[stylesheet.container, containerStyle]}
       />
     </>
   );

src/screens/Transaction/SendFundV2/index.tsx

@@ -50,7 +50,7 @@ import { SubHeader } from 'components/SubHeader';
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from 'routes/index';
-import { DisabledStyle, MarginBottomForSubmitButton } from 'styles/sharedStyles';
+import { DisabledStyle } from 'styles/sharedStyles';
 import { AccountSelectField } from 'components/Field/AccountSelect';
 import i18n from 'utils/i18n/i18n';
 import { TokenSelectField } from 'components/Field/TokenSelect';
@@ -68,6 +68,7 @@ import { getButtonIcon } from 'utils/button';
 import { UseControllerReturn } from 'react-hook-form/dist/types';
 import { AmountValueConverter } from 'screens/Transaction/SendFundV2/AmountValueConverter';
 import { addLazy, removeLazy } from 'utils/lazyUpdate';
+import createStylesheet from './styles';
 
 interface TransferFormValues extends TransactionFormValues {
   to: string;
@@ -301,6 +302,7 @@ export const SendFund = ({
   },
 }: SendFundProps) => {
   const theme = useSubWalletTheme().swThemes;
+  const stylesheet = createStylesheet(theme);
   const { show, hideAll } = useToast();
   const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const [viewStep, setViewStep] = useState<ViewStep>(1);
@@ -562,6 +564,20 @@ export const SendFund = ({
     setChainSelectModalVisible(false);
   };
 
+  const onSubheaderPressBack = useCallback(() => {
+    if (viewStep === 1) {
+      navigation.goBack();
+    } else {
+      setViewStep(1);
+      resetField('value', {
+        keepDirty: false,
+        keepError: false,
+        keepTouched: false,
+      });
+      setForceUpdateValue({ value: null });
+    }
+  }, [navigation, resetField, viewStep]);
+
   // Submit transaction
   const onSubmit = useCallback(
     (values: TransferFormValues) => {
@@ -670,25 +686,16 @@ export const SendFund = ({
           onSideEffectChange={onBlur}
           decimals={decimals}
           placeholder={'0'}
-          containerStyle={{ backgroundColor: 'transparent' }}
-          inputStyle={{
-            textAlign: 'center',
-            fontSize: 38,
-            lineHeight: 40,
-            paddingTop: 0,
-            paddingBottom: 0,
-            height: 62,
-          }}
           showMaxButton
         />
         <AmountValueConverter
           value={isInvalidAmountValue(value) ? '0' : value || '0'}
           tokenSlug={assetValue}
-          style={{ justifyContent: 'center' }}
+          style={stylesheet.amountValueConverter}
         />
       </>
     ),
-    [assetValue, decimals, forceUpdateValue, onInputChangeAmount],
+    [assetValue, decimals, forceUpdateValue, onInputChangeAmount, stylesheet.amountValueConverter],
   );
 
   useEffect(() => {
@@ -832,58 +839,46 @@ export const SendFund = ({
         <>
           <Header />
 
-          <View style={{ paddingTop: theme.padding }}>
+          <View style={stylesheet.subheader}>
             <SubHeader
               title={viewStep === 1 ? title : 'Amount'}
-              onPressBack={() => {
-                if (viewStep === 1) {
-                  navigation.goBack();
-                } else {
-                  setViewStep(1);
-                  resetField('value', {
-                    keepDirty: false,
-                    keepError: false,
-                    keepTouched: false,
-                  });
-                  setForceUpdateValue({ value: null });
-                }
-              }}
+              onPressBack={onSubheaderPressBack}
               disabled={loading}
             />
           </View>
 
           <>
             <ScrollView
-              style={{ flex: 1, marginTop: theme.margin }}
-              contentContainerStyle={{ paddingHorizontal: theme.padding }}
+              style={stylesheet.scrollView}
+              contentContainerStyle={stylesheet.scrollViewContentContainer}
               keyboardShouldPersistTaps={'handled'}>
               {isAllAccount && viewStep === 1 && (
                 <>
                   <TouchableOpacity
                     onPress={() => setAccountSelectModalVisible(true)}
                     disabled={loading}
-                    style={[{ marginBottom: theme.margin }, loading && DisabledStyle]}>
+                    style={[stylesheet.accountSelector, loading && DisabledStyle]}>
                     <AccountSelectField
                       label={i18n.inputLabel.sendFrom}
                       accountName={senderAccountName}
                       value={fromValue}
                       showIcon
-                      outerStyle={{ marginBottom: 0 }}
+                      outerStyle={stylesheet.selector}
                     />
                   </TouchableOpacity>
                 </>
               )}
 
-              <View style={{ flexDirection: 'row', gap: theme.sizeSM, marginBottom: theme.margin }}>
-                <View style={{ flex: 1 }}>
+              <View style={stylesheet.row}>
+                <View style={stylesheet.rowItem}>
                   <TouchableOpacity
                     style={[(!tokenItems.length || loading) && DisabledStyle]}
                     disabled={!tokenItems.length || loading}
                     onPress={() => {
                       setTokenSelectModalVisible(true);
                     }}>
                     <TokenSelectField
-                      outerStyle={{ marginBottom: 0 }}
+                      outerStyle={stylesheet.selector}
                       logoKey={currentChainAsset?.symbol || ''}
                       subLogoKey={currentChainAsset?.originChain || ''}
                       value={currentChainAsset?.symbol || ''}
@@ -892,11 +887,11 @@ export const SendFund = ({
                   </TouchableOpacity>
                 </View>
 
-                <View style={{ justifyContent: 'center' }}>
+                <View style={stylesheet.paperPlaneIconWrapper}>
                   <Icon phosphorIcon={PaperPlaneRight} size={'md'} iconColor={theme['gray-5']} />
                 </View>
 
-                <View style={{ flex: 1 }}>
+                <View style={stylesheet.rowItem}>
                   <TouchableOpacity
                     style={[(!destChainItems.length || loading) && DisabledStyle]}
                     disabled={!destChainItems.length || loading}
@@ -905,7 +900,7 @@ export const SendFund = ({
                     }}>
                     <NetworkField
                       networkKey={destChainValue}
-                      outerStyle={{ marginBottom: 0 }}
+                      outerStyle={stylesheet.selector}
                       placeholder={i18n.placeholder.selectChain}
                       showIcon
                     />
@@ -940,19 +935,19 @@ export const SendFund = ({
               )}
 
               {viewStep === 2 && (
-                <View style={{ paddingTop: 48, paddingBottom: 56 }}>
+                <View style={stylesheet.amountWrapper}>
                   <FormItem control={control} rules={amountRules} render={renderAmountInput} name="value" />
                 </View>
               )}
 
-              <View style={{ flexDirection: 'row' }}>
+              <View style={stylesheet.balanceWrapper}>
                 <FreeBalance
                   label={viewStep === 2 ? 'Balance:' : undefined}
                   address={fromValue}
                   chain={chainValue}
                   onBalanceReady={setIsBalanceReady}
                   tokenSlug={assetValue}
-                  style={{ paddingTop: theme.padding, marginBottom: 0, flex: 1 }}
+                  style={stylesheet.balance}
                 />
 
                 {viewStep === 2 && (
@@ -965,23 +960,14 @@ export const SendFund = ({
                         setIsTransferAll(true);
                       }
                     }}
-                    style={{
-                      paddingHorizontal: theme.padding,
-                      paddingTop: theme.padding,
-                      marginRight: -theme.margin,
-                    }}>
-                    {<Typography.Text style={{ color: theme.colorSuccess }}>Max</Typography.Text>}
+                    style={stylesheet.max}>
+                    {<Typography.Text style={stylesheet.maxText}>Max</Typography.Text>}
                   </TouchableOpacity>
                 )}
               </View>
             </ScrollView>
 
-            <View
-              style={{
-                paddingHorizontal: 16,
-                paddingTop: 16,
-                ...MarginBottomForSubmitButton,
-              }}>
+            <View style={stylesheet.footer}>
               {viewStep === 1 && (
                 <Button
                   disabled={isNextButtonDisable}

src/screens/Transaction/SendFundV2/styles/Amount.ts

@@ -1,10 +1,18 @@
 import { ThemeTypes } from 'styles/themes';
 import { StyleSheet } from 'react-native';
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export default (theme: ThemeTypes) =>
   StyleSheet.create({
-    buttonText: {
-      color: theme.colorSuccess,
+    container: {
+      backgroundColor: 'transparent',
+    },
+    input: {
+      textAlign: 'center',
+      fontSize: 38,
+      lineHeight: 40,
+      paddingTop: 0,
+      paddingBottom: 0,
+      height: 62,
     },
-    input: {},
   });

src/screens/Transaction/SendFundV2/styles/index.ts

@@ -0,0 +1,62 @@
+import { ThemeTypes } from 'styles/themes';
+import { StyleSheet } from 'react-native';
+import { MarginBottomForSubmitButton } from 'styles/sharedStyles';
+
+export default (theme: ThemeTypes) =>
+  StyleSheet.create({
+    amountValueConverter: {
+      justifyContent: 'center',
+    },
+    footer: {
+      paddingHorizontal: theme.padding,
+      paddingTop: theme.padding,
+      ...MarginBottomForSubmitButton,
+    },
+    max: {
+      paddingHorizontal: theme.padding,
+      paddingTop: theme.padding,
+      marginRight: -theme.margin,
+    },
+    maxText: {
+      color: theme.colorSuccess,
+    },
+    row: {
+      flexDirection: 'row',
+      gap: theme.sizeSM,
+      marginBottom: theme.margin,
+    },
+    subheader: {
+      paddingTop: theme.padding,
+    },
+    accountSelector: {
+      marginBottom: theme.margin,
+    },
+    scrollView: {
+      flex: 1,
+      marginTop: theme.margin,
+    },
+    scrollViewContentContainer: {
+      paddingHorizontal: theme.padding,
+    },
+    paperPlaneIconWrapper: {
+      justifyContent: 'center',
+    },
+    rowItem: {
+      flex: 1,
+    },
+    amountWrapper: {
+      paddingTop: 48,
+      paddingBottom: 56,
+    },
+    selector: {
+      marginBottom: 0,
+    },
+    balanceWrapper: {
+      flexDirection: 'row',
+    },
+    balance: {
+      paddingTop: theme.padding,
+      marginBottom: 0,
+      flex: 1,
+    },
+  });