REF: Icons to TSX

class/wallets/lightning-custodian-wallet.ts

@@ -36,7 +36,7 @@ export class LightningCustodianWallet extends LegacyWallet {
    * @param URI
    */
   setBaseURI(URI: string | undefined) {
-    this.baseURI = URI?.endsWith("/") ? URI.slice(0, -1) : URI;
+    this.baseURI = URI?.endsWith('/') ? URI.slice(0, -1) : URI;
   }
 
   getBaseURI() {
@@ -579,7 +579,7 @@ export class LightningCustodianWallet extends LegacyWallet {
   }
 
   static async isValidNodeAddress(address: string) {
-    const response = await fetch((address?.endsWith("/") ? address.slice(0, -1) : address) + '/getinfo', {
+    const response = await fetch((address?.endsWith('/') ? address.slice(0, -1) : address) + '/getinfo', {
       method: 'GET',
       headers: {
         'Access-Control-Allow-Origin': '*',

components/Header.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-
-import loc from '../loc';
 import PlusIcon from './icons/PlusIcon';
 import { useTheme } from './themes';
 
@@ -27,7 +25,7 @@ export const Header: React.FC<HeaderProps> = ({ leftText, isDrawerList, onNewWal
   return (
     <View style={[styles.root, styleWithProps.root]}>
       <Text style={[styles.text, styleWithProps.text]}>{leftText}</Text>
-      {onNewWalletPress && <PlusIcon accessibilityRole="button" accessibilityLabel={loc.wallets.add_title} onPress={onNewWalletPress} />}
+      {onNewWalletPress && <PlusIcon onPress={onNewWalletPress} />}
     </View>
   );
 };

components/icons/PlusIcon.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
-import { StyleSheet, TouchableOpacity } from 'react-native';
+import { StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
 import { Icon } from '@rneui/themed';
 
 import { useTheme } from '../themes';
+import loc from '../../loc';
+
+type PlusIconProps = {
+  onPress: () => void;
+};
 
 const styles = StyleSheet.create({
   ball: {
@@ -11,10 +16,10 @@ const styles = StyleSheet.create({
     borderRadius: 15,
     justifyContent: 'center',
     alignContent: 'center',
-  },
+  } as ViewStyle,
 });
 
-const PlusIcon = props => {
+const PlusIcon: React.FC<PlusIconProps> = ({ onPress }) => {
   const { colors } = useTheme();
   const stylesHook = StyleSheet.create({
     ball: {
@@ -23,7 +28,12 @@ const PlusIcon = props => {
   });
 
   return (
-    <TouchableOpacity style={[styles.ball, stylesHook.ball]} onPress={props.onPress}>
+    <TouchableOpacity
+      style={[styles.ball, stylesHook.ball]}
+      accessibilityLabel={loc.wallets.add_title}
+      onPress={onPress}
+      accessibilityRole="button"
+    >
       <Icon name="add" size={22} type="ionicons" color={colors.foregroundColor} />
     </TouchableOpacity>
   );

components/icons/TransactionExpiredIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 import { Icon } from '@rneui/themed';
 
 import { useTheme } from '../themes';
@@ -7,20 +7,20 @@ import { useTheme } from '../themes';
 const styles = StyleSheet.create({
   boxIncoming: {
     position: 'relative',
-  },
+  } as ViewStyle,
   ballOutgoingExpired: {
     width: 30,
     height: 30,
     borderRadius: 15,
     justifyContent: 'center',
-  },
+  } as ViewStyle,
   icon: {
     left: 0,
     top: 0,
   },
 });
 
-const TransactionExpiredIcon = props => {
+const TransactionExpiredIcon: React.FC = () => {
   const { colors } = useTheme();
   const stylesHooks = StyleSheet.create({
     ballOutgoingExpired: {

components/icons/TransactionIncomingIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 import { Icon } from '@rneui/themed';
 
 import { useTheme } from '../themes';
@@ -7,17 +7,17 @@ import { useTheme } from '../themes';
 const styles = StyleSheet.create({
   boxIncoming: {
     position: 'relative',
-  },
+  } as ViewStyle,
   ballIncoming: {
     width: 30,
     height: 30,
     borderRadius: 15,
     transform: [{ rotate: '-45deg' }],
     justifyContent: 'center',
-  },
+  } as ViewStyle,
 });
 
-const TransactionIncomingIcon = props => {
+const TransactionIncomingIcon: React.FC = () => {
   const { colors } = useTheme();
   const stylesHooks = StyleSheet.create({
     ballIncoming: {

components/icons/TransactionOffchainIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 import { Icon } from '@rneui/themed';
 
 import { useTheme } from '../themes';
@@ -7,19 +7,19 @@ import { useTheme } from '../themes';
 const styles = StyleSheet.create({
   boxIncoming: {
     position: 'relative',
-  },
+  } as ViewStyle,
   ballOutgoingWithoutRotate: {
     width: 30,
     height: 30,
     borderRadius: 15,
-  },
+  } as ViewStyle,
   icon: {
     left: 0,
     marginTop: 6,
   },
 });
 
-const TransactionOffchainIcon = props => {
+const TransactionOffchainIcon: React.FC = () => {
   const { colors } = useTheme();
   const stylesHooks = StyleSheet.create({
     ballOutgoingWithoutRotate: {

components/icons/TransactionOffchainIncomingIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 import { Icon } from '@rneui/themed';
 
 import { useTheme } from '../themes';
@@ -7,19 +7,19 @@ import { useTheme } from '../themes';
 const styles = StyleSheet.create({
   boxIncoming: {
     position: 'relative',
-  },
+  } as ViewStyle,
   ballIncomingWithoutRotate: {
     width: 30,
     height: 30,
     borderRadius: 15,
-  },
+  } as ViewStyle,
   icon: {
     left: 0,
     marginTop: 6,
   },
 });
 
-const TransactionOffchainIncomingIcon = props => {
+const TransactionOffchainIncomingIcon: React.FC = () => {
   const { colors } = useTheme();
   const stylesHooks = StyleSheet.create({
     ballIncomingWithoutRotate: {

components/icons/TransactionOnchainIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 import { Icon } from '@rneui/themed';
 
 import { useTheme } from '../themes';
@@ -7,14 +7,14 @@ import { useTheme } from '../themes';
 const styles = StyleSheet.create({
   boxIncoming: {
     position: 'relative',
-  },
+  } as ViewStyle,
   ballIncoming: {
     width: 30,
     height: 30,
     borderRadius: 15,
     transform: [{ rotate: '-45deg' }],
     justifyContent: 'center',
-  },
+  } as ViewStyle,
   icon: {
     left: 0,
     top: 0,
@@ -22,7 +22,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const TransactionOnchainIcon = props => {
+const TransactionOnchainIcon: React.FC = () => {
   const { colors } = useTheme();
   const stylesBlueIconHooks = StyleSheet.create({
     ballIncoming: {

components/icons/TransactionOutgoingIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 import { Icon } from '@rneui/themed';
 
 import { useTheme } from '../themes';
@@ -7,17 +7,17 @@ import { useTheme } from '../themes';
 const styles = StyleSheet.create({
   boxIncoming: {
     position: 'relative',
-  },
+  } as ViewStyle,
   ballOutgoing: {
     width: 30,
     height: 30,
     borderRadius: 15,
     transform: [{ rotate: '225deg' }],
     justifyContent: 'center',
-  },
+  } as ViewStyle,
 });
 
-const TransactionOutgoingIcon = props => {
+const TransactionOutgoingIcon: React.FC = () => {
   const { colors } = useTheme();
   const stylesBlueIconHooks = StyleSheet.create({
     ballOutgoing: {

components/icons/TransactionPendingIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 import { Icon } from '@rneui/themed';
 
 import { useTheme } from '../themes';
@@ -7,19 +7,19 @@ import { useTheme } from '../themes';
 const styles = StyleSheet.create({
   boxIncoming: {
     position: 'relative',
-  },
+  } as ViewStyle,
   ball: {
     width: 30,
     height: 30,
     borderRadius: 15,
-  },
+  } as ViewStyle,
   icon: {
     left: 0,
     top: 7,
   },
 });
 
-const TransactionPendingIcon = props => {
+const TransactionPendingIcon: React.FC = () => {
   const { colors } = useTheme();
   const stylesHook = StyleSheet.create({
     ball: {

navigation/DetailViewScreensStack.tsx

@@ -83,7 +83,7 @@ const DetailViewStackScreensStack = () => {
   const RightBarButtons = useMemo(
     () => (
       <>
-        <PlusIcon accessibilityRole="button" accessibilityLabel={loc.wallets.add_title} onPress={navigateToAddWallet} />
+        <PlusIcon onPress={navigateToAddWallet} />
         <View style={styles.width24} />
         <SettingsButton />
       </>