chore: added test ids to maestro flows

Author: ignaciosantise

.maestro/native/connect_confirm.yaml

@@ -6,8 +6,15 @@ name: React Native Dapp to React Native Wallet Connection Confirmed
     permissions:
       all: allow
 - startRecording: "Native Connection Confirmed"
-- tapOn: "Connect"
-- tapOn: "React Native Wallet"
-- tapOn: "Approve"
+- tapOn:
+    id: "connect-button"
+- tapOn:
+    id: "all-wallets"
+- waitForAnimationToEnd
+- tapOn: "React"
+- waitForAnimationToEnd
+- tapOn:
+    id: "approve-button"
+- waitForAnimationToEnd
 - assertVisible: "Sign message"
 - stopRecording

.maestro/native/connect_reject.yaml

@@ -1,13 +1,20 @@
 appId: com.walletconnect.web3modal.rnsample.internal
-name: React Native Dapp to React Native Wallet Connection Confirmed
+name: React Native Dapp to React Native Wallet Connection Rejected
 ---
 - clearState
 - launchApp:
     permissions:
       all: allow
 - startRecording: "Native to Native Connection Rejected"
-- tapOn: "Connect"
-- tapOn: "React Native Wallet"
-- tapOn: "Reject"
+- tapOn:
+    id: "connect-button"
+- tapOn:
+    id: "all-wallets"
+- waitForAnimationToEnd
+- tapOn: "React"
+- waitForAnimationToEnd
+- tapOn:
+    id: "reject-button"
+- waitForAnimationToEnd
 - assertVisible: "Connection declined"
 - stopRecording

.maestro/native/personal_sign_confirm.yaml

@@ -5,7 +5,9 @@ name: React Native Dapp to React Native Wallet Personal Sign Confirmed
     permissions:
       all: allow
 - startRecording: "Native personal_sign Confirmed"
+- waitForAnimationToEnd
 - tapOn: "Sign message"
-- tapOn: "Approve"
+- tapOn:
+    id: "approve-button"
 - assertVisible: "Request response"
 - stopRecording

.maestro/native/personal_sign_reject.yaml

@@ -5,7 +5,9 @@ name: React Native Dapp to React Native Wallet Personal Sign Rejected
     permissions:
       all: allow
 - startRecording: "Native personal_sign Rejected"
+- waitForAnimationToEnd
 - tapOn: "Sign message"
-- tapOn: "Reject"
+- tapOn:
+    id: "reject-button"
 - assertVisible: "Request failure"
 - stopRecording

.maestro/web/connect_confirm.yaml

@@ -18,6 +18,7 @@ name: AppKit Web to React Native Wallet Connection Confirmed
       platform: iOS
     commands:
       - back
-- tapOn: "Approve"
+- tapOn:
+    id: "approve-button"
 - assertVisible: "AppKit Interactions"
 - stopRecording

.maestro/web/connect_reject.yaml

@@ -13,7 +13,8 @@ name: AppKit Web to React Native Wallet Connection Rejected
 - scroll
 - scroll
 - tapOn: "React Native Sample Wallet React Native Sample Wallet"
-- tapOn: "Reject"
+- tapOn:
+    id: "reject-button"
 - runFlow:
     when:
       platform: iOS

.maestro/web/personal_sign_confirm.yaml

@@ -11,11 +11,14 @@ name: AppKit Web to React Native Wallet Sign Request Confirmed
 - scroll
 - scroll
 - tapOn: "Sign Message"
-- tapOn: "Approve"
+- waitForAnimationToEnd
+- tapOn:
+    id: "approve-button"
 - runFlow:
     when:
       platform: iOS
     commands:
       - back
+- waitForAnimationToEnd
 - assertVisible: "Signing Succeeded"
 - stopRecording

.maestro/web/personal_sign_reject.yaml

@@ -11,11 +11,14 @@ name: AppKit Web to React Native Wallet Sign Request Rejected
 - scroll
 - scroll
 - tapOn: "Sign Message"
-- tapOn: "Reject"
+- waitForAnimationToEnd
+- tapOn:
+    id: "reject-button"
 - runFlow:
     when:
       platform: iOS
     commands:
       - back
+- waitForAnimationToEnd
 - assertVisible: "Signing Failed"
 - stopRecording

wallets/rn_cli_wallet/src/components/ActionButton.tsx

@@ -17,6 +17,7 @@ export interface ActionButtonProps {
   disabled?: boolean;
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
+  testID?: string;
 }
 
 export function ActionButton({
@@ -27,6 +28,7 @@ export function ActionButton({
   disabled,
   style,
   textStyle,
+  testID,
 }: ActionButtonProps) {
   const Theme = useTheme();
   const backgroundColor = secondary ? Theme['bg-200'] : Theme['accent-100'];
@@ -35,6 +37,7 @@ export function ActionButton({
   return (
     <TouchableOpacity
       onPress={onPress}
+      testID={testID}
       disabled={disabled || loading}
       style={[styles.container, {backgroundColor}, style]}>
       {loading ? (

wallets/rn_cli_wallet/src/components/Modal/ModalFooter.tsx

@@ -41,6 +41,7 @@ export function ModalFooter({
           style={styles.button}
           textStyle={styles.rejectText}
           onPress={onReject}
+          testID="reject-button"
           secondary>
           Reject
         </ActionButton>
@@ -49,7 +50,8 @@ export function ModalFooter({
           disabled={approveLoader || rejectLoader}
           style={[styles.button, {backgroundColor: bgColor}]}
           textStyle={styles.approveText}
-          onPress={onApprove}>
+          onPress={onApprove}
+          testID="approve-button">
           Approve
         </ActionButton>
       </View>