REF: MultipleStepsListItem to TSX

components/MultipleStepsListItem.tsx

@@ -1,23 +1,66 @@
-import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
-import { ActivityIndicator, findNodeHandle, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+  ActivityIndicator,
+  findNodeHandle,
+  GestureResponderEvent,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
 import { Icon } from '@rneui/themed';
-
 import ActionSheet from '../screen/ActionSheet';
-import ActionSheetOptions from '../screen/ActionSheet.common';
 import { useTheme } from './themes';
-export const MultipleStepsListItemDashType = Object.freeze({ none: 0, top: 1, bottom: 2, topAndBottom: 3 });
+import { ActionSheetOptions } from '../screen/ActionSheet.common';
-export const MultipleStepsListItemButtohType = Object.freeze({ partial: 0, full: 1 });
 
-const MultipleStepsListItem = props => {
+export enum MultipleStepsListItemDashType {
+  None = 0,
+  Top = 1,
+  Bottom = 2,
+  TopAndBottom = 3,
+}
+
+export enum MultipleStepsListItemButtonType {
+  Partial = 0,
+  Full = 1,
+}
+
+interface MultipleStepsListItemProps {
+  circledText?: string;
+  checked?: boolean;
+  leftText?: string;
+  showActivityIndicator?: boolean;
+  isActionSheet?: boolean;
+  actionSheetOptions?: ActionSheetOptions;
+  dashes?: MultipleStepsListItemDashType;
+  button?: {
+    text?: string;
+    onPress?: (e: GestureResponderEvent | number) => void;
+    disabled?: boolean;
+    buttonType?: MultipleStepsListItemButtonType;
+    leftText?: string;
+    showActivityIndicator?: boolean;
+    testID?: string;
+  };
+  rightButton?: {
+    text?: string;
+    onPress?: () => void;
+    disabled?: boolean;
+    showActivityIndicator?: boolean;
+  };
+}
+
+const MultipleStepsListItem = (props: MultipleStepsListItemProps) => {
   const { colors } = useTheme();
   const {
     showActivityIndicator = false,
-    dashes = MultipleStepsListItemDashType.none,
+    dashes = MultipleStepsListItemDashType.None,
     circledText = '',
     leftText = '',
     checked = false,
-    useActionSheet = false,
+    isActionSheet = false,
     actionSheetOptions = null, // Default to null or appropriate default
   } = props;
   const stylesHook = StyleSheet.create({
@@ -43,7 +86,7 @@ const MultipleStepsListItem = props => {
   const selfRef = useRef(null); // Create a ref for the component itself
 
   const handleOnPressForActionSheet = () => {
-    if (useActionSheet && actionSheetOptions) {
+    if (isActionSheet && actionSheetOptions) {
       // Clone options to modify them
       let modifiedOptions = { ...actionSheetOptions };
 
@@ -57,16 +100,16 @@ const MultipleStepsListItem = props => {
 
       ActionSheet.showActionSheetWithOptions(modifiedOptions, buttonIndex => {
         // Call the original onPress function, if provided, and not cancelled
-        if (buttonIndex !== -1 && props.button.onPress) {
+        if (buttonIndex !== -1 && props.button?.onPress) {
           props.button.onPress(buttonIndex);
         }
       });
     }
   };
 
-  const renderDashes = () => {
+  const renderDashes = (): StyleProp<ViewStyle> => {
     switch (dashes) {
-      case MultipleStepsListItemDashType.topAndBottom:
+      case MultipleStepsListItemDashType.TopAndBottom:
         return {
           width: 1,
           borderStyle: 'dashed',
@@ -77,7 +120,7 @@ const MultipleStepsListItem = props => {
           marginLeft: 20,
           position: 'absolute',
         };
-      case MultipleStepsListItemDashType.bottom:
+      case MultipleStepsListItemDashType.Bottom:
         return {
           width: 1,
           borderStyle: 'dashed',
@@ -88,7 +131,7 @@ const MultipleStepsListItem = props => {
           marginLeft: 20,
           position: 'absolute',
         };
-      case MultipleStepsListItemDashType.top:
+      case MultipleStepsListItemDashType.Top:
         return {
           width: 1,
           borderStyle: 'dashed',
@@ -105,6 +148,7 @@ const MultipleStepsListItem = props => {
   };
   const buttonOpacity = { opacity: props.button?.disabled ? 0.5 : 1.0 };
   const rightButtonOpacity = { opacity: props.rightButton?.disabled ? 0.5 : 1.0 };
+  const onPress = isActionSheet ? handleOnPressForActionSheet : props.button?.onPress;
   return (
     <View>
       <View style={renderDashes()} />
@@ -131,19 +175,19 @@ const MultipleStepsListItem = props => {
         {!showActivityIndicator && props.button && (
           <>
             {props.button.buttonType === undefined ||
-              (props.button.buttonType === MultipleStepsListItemButtohType.full && (
+              (props.button.buttonType === MultipleStepsListItemButtonType.Full && (
                 <TouchableOpacity
-                  ref={useActionSheet ? selfRef : null}
+                  ref={isActionSheet ? selfRef : null}
                   testID={props.button.testID}
                   accessibilityRole="button"
                   disabled={props.button.disabled}
                   style={[styles.provideKeyButton, stylesHook.provideKeyButton, buttonOpacity]}
-                  onPress={useActionSheet ? handleOnPressForActionSheet : props.button.onPress}
+                  onPress={onPress}
                 >
                   <Text style={[styles.provideKeyButtonText, stylesHook.provideKeyButtonText]}>{props.button.text}</Text>
                 </TouchableOpacity>
               ))}
-            {props.button.buttonType === MultipleStepsListItemButtohType.partial && (
+            {props.button.buttonType === MultipleStepsListItemButtonType.Partial && (
               <View style={styles.buttonPartialContainer}>
                 <Text numberOfLines={1} style={[styles.rowPartialLeftText, stylesHook.rowPartialLeftText]} lineBreakMode="middle">
                   {props.button.leftText}
@@ -153,7 +197,7 @@ const MultipleStepsListItem = props => {
                   accessibilityRole="button"
                   disabled={props.button.disabled}
                   style={[styles.rowPartialRightButton, stylesHook.provideKeyButton, rightButtonOpacity]}
-                  onPress={props.button.onPress}
+                  onPress={onPress}
                 >
                   {props.button.showActivityIndicator ? (
                     <ActivityIndicator />
@@ -188,30 +232,6 @@ const MultipleStepsListItem = props => {
   );
 };
 
-MultipleStepsListItem.propTypes = {
-  circledText: PropTypes.string,
-  checked: PropTypes.bool,
-  leftText: PropTypes.string,
-  showActivityIndicator: PropTypes.bool,
-  useActionSheet: PropTypes.bool,
-  actionSheetOptions: PropTypes.shape(ActionSheetOptions),
-  dashes: PropTypes.number,
-  button: PropTypes.shape({
-    text: PropTypes.string,
-    onPress: PropTypes.func,
-    disabled: PropTypes.bool,
-    buttonType: PropTypes.number,
-    leftText: PropTypes.string,
-    showActivityIndicator: PropTypes.bool,
-  }),
-  rightButton: PropTypes.shape({
-    text: PropTypes.string,
-    onPress: PropTypes.func,
-    disabled: PropTypes.bool,
-    showActivityIndicator: PropTypes.bool,
-  }),
-};
-
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',

ios/Podfile.lock

@@ -13,7 +13,7 @@ PODS:
     - hermes-engine/Pre-built (= 0.75.4)
   - hermes-engine/Pre-built (0.75.4)
   - lottie-ios (4.5.0)
-  - lottie-react-native (7.2.1):
+  - lottie-react-native (7.2.2):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2209,7 +2209,7 @@ SPEC CHECKSUMS:
   glog: 69ef571f3de08433d766d614c73a9838a06bf7eb
   hermes-engine: ea92f60f37dba025e293cbe4b4a548fd26b610a0
   lottie-ios: a881093fab623c467d3bce374367755c272bdd59
-  lottie-react-native: 816fb00189b309b3eee7c152ddfc8d37f56d1865
+  lottie-react-native: 64e768349391867509ebdd097663ac991afcbd8c
   RCT-Folly: 34124ae2e667a0e5f0ea378db071d27548124321
   RCTDeprecation: 726d24248aeab6d7180dac71a936bbca6a994ed1
   RCTRequired: a94e7febda6db0345d207e854323c37e3a31d93b

screen/ActionSheet.common.ts

@@ -5,6 +5,7 @@ export interface ActionSheetOptions {
   options: string[]; // Array of button labels.
   destructiveButtonIndex?: number;
   cancelButtonIndex?: number;
+  confirmButtonIndex?: number;
   anchor?: number;
 }
 

screen/wallets/ViewEditMultisigCosigners.tsx

@@ -5,6 +5,7 @@ import {
   Alert,
   findNodeHandle,
   FlatList,
+  GestureResponderEvent,
   InteractionManager,
   Keyboard,
   LayoutAnimation,
@@ -31,7 +32,7 @@ import presentAlert from '../../components/Alert';
 import BottomModal, { BottomModalHandle } from '../../components/BottomModal';
 import Button from '../../components/Button';
 import MultipleStepsListItem, {
-  MultipleStepsListItemButtohType,
+  MultipleStepsListItemButtonType,
   MultipleStepsListItemDashType,
 } from '../../components/MultipleStepsListItem';
 import QRCodeComponent from '../../components/QRCodeComponent';
@@ -321,7 +322,7 @@ const ViewEditMultisigCosigners: React.FC = () => {
         <MultipleStepsListItem
           checked
           leftText={loc.formatString(loc.multisig.vault_key, { number: el.index + 1 })}
-          dashes={el.index === length - 1 ? MultipleStepsListItemDashType.bottom : MultipleStepsListItemDashType.topAndBottom}
+          dashes={el.index === length - 1 ? MultipleStepsListItemDashType.Bottom : MultipleStepsListItemDashType.TopAndBottom}
         />
 
         {isXpub ? (
@@ -329,7 +330,7 @@ const ViewEditMultisigCosigners: React.FC = () => {
             {!vaultKeyData.isLoading && (
               <MultipleStepsListItem
                 button={{
-                  buttonType: MultipleStepsListItemButtohType.partial,
+                  buttonType: MultipleStepsListItemButtonType.Partial,
                   leftText,
                   text: loc.multisig.view,
                   showActivityIndicator: isVaultKeyIndexDataLoading === el.index + 1,
@@ -362,21 +363,21 @@ const ViewEditMultisigCosigners: React.FC = () => {
                     }, 100);
                   },
                 }}
-                dashes={MultipleStepsListItemDashType.topAndBottom}
+                dashes={MultipleStepsListItemDashType.TopAndBottom}
               />
             )}
             <MultipleStepsListItem
               showActivityIndicator={vaultKeyData.keyIndex === el.index + 1 && vaultKeyData.isLoading}
               button={{
                 text: loc.multisig.i_have_mnemonics,
-                buttonType: MultipleStepsListItemButtohType.full,
+                buttonType: MultipleStepsListItemButtonType.Full,
                 disabled: vaultKeyData.isLoading,
                 onPress: () => {
                   setCurrentlyEditingCosignerNum(el.index + 1);
                   provideMnemonicsModalRef.current?.present();
                 },
               }}
-              dashes={el.index === length - 1 ? MultipleStepsListItemDashType.top : MultipleStepsListItemDashType.topAndBottom}
+              dashes={el.index === length - 1 ? MultipleStepsListItemDashType.Top : MultipleStepsListItemDashType.TopAndBottom}
             />
           </View>
         ) : (
@@ -389,7 +390,7 @@ const ViewEditMultisigCosigners: React.FC = () => {
                   text: loc.multisig.view,
                   disabled: vaultKeyData.isLoading,
                   showActivityIndicator: isVaultKeyIndexDataLoading === el.index + 1,
-                  buttonType: MultipleStepsListItemButtohType.partial,
+                  buttonType: MultipleStepsListItemButtonType.Partial,
                   onPress: () => {
                     setIsVaultKeyIndexDataLoading(el.index + 1);
                     setTimeout(() => {
@@ -420,7 +421,7 @@ const ViewEditMultisigCosigners: React.FC = () => {
                     }, 100);
                   },
                 }}
-                dashes={MultipleStepsListItemDashType.topAndBottom}
+                dashes={MultipleStepsListItemDashType.TopAndBottom}
               />
             )}
 
@@ -433,14 +434,14 @@ const ViewEditMultisigCosigners: React.FC = () => {
                 confirmButtonIndex: 1,
               }}
               showActivityIndicator={vaultKeyData.keyIndex === el.index + 1 && vaultKeyData.isLoading}
-              dashes={el.index === length - 1 ? MultipleStepsListItemDashType.top : MultipleStepsListItemDashType.topAndBottom}
+              dashes={el.index === length - 1 ? MultipleStepsListItemDashType.Top : MultipleStepsListItemDashType.TopAndBottom}
               button={{
                 text: loc.multisig.forget_this_seed,
                 disabled: vaultKeyData.isLoading,
-                buttonType: MultipleStepsListItemButtohType.full,
+                buttonType: MultipleStepsListItemButtonType.Full,
 
-                onPress: (buttonIndex: number) => {
+                onPress: (e: number | GestureResponderEvent) => {
-                  if (buttonIndex === 0) return;
+                  if (e === 0) return;
                   LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
                   setVaultKeyData({
                     ...vaultKeyData,

screen/wallets/addMultisigStep2.js

@@ -21,10 +21,6 @@ import { HDSegwitBech32Wallet, MultisigCosigner, MultisigHDWallet } from '../../
 import presentAlert from '../../components/Alert';
 import BottomModal from '../../components/BottomModal';
 import Button from '../../components/Button';
-import MultipleStepsListItem, {
-  MultipleStepsListItemButtohType,
-  MultipleStepsListItemDashType,
-} from '../../components/MultipleStepsListItem';
 import QRCodeComponent from '../../components/QRCodeComponent';
 import { useTheme } from '../../components/themes';
 import confirm from '../../helpers/confirm';
@@ -42,6 +38,10 @@ import {
   DoneAndDismissKeyboardInputAccessory,
   DoneAndDismissKeyboardInputAccessoryViewID,
 } from '../../components/DoneAndDismissKeyboardInputAccessory';
+import MultipleStepsListItem, {
+  MultipleStepsListItemButtonType,
+  MultipleStepsListItemDashType,
+} from '../../components/MultipleStepsListItem';
 
 const staticCache = {};
 
@@ -495,15 +495,15 @@ const WalletsAddMultisigStep2 = () => {
   const dashType = ({ index, lastIndex, isChecked, isFocus }) => {
     if (isChecked) {
       if (index === lastIndex) {
-        return MultipleStepsListItemDashType.top;
+        return MultipleStepsListItemDashType;
       } else {
-        return MultipleStepsListItemDashType.topAndBottom;
+        return MultipleStepsListItemDashType.TopAndBottom;
       }
     } else {
       if (index === lastIndex) {
-        return isFocus ? MultipleStepsListItemDashType.topAndBottom : MultipleStepsListItemDashType.top;
+        return isFocus ? MultipleStepsListItemDashType.TopAndBottom : MultipleStepsListItemDashType.Top;
       } else {
-        return MultipleStepsListItemDashType.topAndBottom;
+        return MultipleStepsListItemDashType.TopAndBottom;
       }
     }
   };
@@ -531,7 +531,7 @@ const WalletsAddMultisigStep2 = () => {
             <MultipleStepsListItem
               showActivityIndicator={vaultKeyData.keyIndex === el.index && vaultKeyData.isLoading}
               button={{
-                buttonType: MultipleStepsListItemButtohType.full,
+                buttonType: MultipleStepsListItemButtonType.Full,
                 onPress: () => {
                   setVaultKeyData({ keyIndex: el.index, xpub: '', seed: '', isLoading: true });
                   generateNewKey();
@@ -539,18 +539,18 @@ const WalletsAddMultisigStep2 = () => {
                 text: loc.multisig.create_new_key,
                 disabled: vaultKeyData.isLoading,
               }}
-              dashes={MultipleStepsListItemDashType.topAndBottom}
+              dashes={MultipleStepsListItemDashType.TopAndBottom}
               checked={isChecked}
             />
             <MultipleStepsListItem
               button={{
                 testID: 'VaultCosignerImport' + String(el.index + 1),
                 onPress: iHaveMnemonics,
-                buttonType: MultipleStepsListItemButtohType.full,
+                buttonType: MultipleStepsListItemButtonType.Full,
                 text: loc.wallets.import_do_import,
                 disabled: vaultKeyData.isLoading,
               }}
-              dashes={el.index === data.current.length - 1 ? MultipleStepsListItemDashType.top : MultipleStepsListItemDashType.topAndBottom}
+              dashes={el.index === data.current.length - 1 ? MultipleStepsListItemDashType.Top : MultipleStepsListItemDashType.TopAndBottom}
               checked={isChecked}
             />
           </>