Merge branch 'main' of https://github.com/hyperledger/aries-mobile-ag…

…ent-react-native into feat-update-camera

packages/legacy/core/App/components/modals/CommonRemoveModal.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Modal, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { Modal, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import Collapsible from 'react-native-collapsible'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import Icon from 'react-native-vector-icons/MaterialIcons'
@@ -99,30 +99,32 @@ const CommonRemoveModal: React.FC<CommonRemoveModalProps> = ({ usage, visible, o
   }
 
   const styles = StyleSheet.create({
+    safeAreaView: {
+      backgroundColor: ColorPallet.brand.modalPrimaryBackground,
+      borderTopRightRadius: 10,
+      borderTopLeftRadius: 10,
+    },
     container: {
       height: '100%',
-      backgroundColor: ColorPallet.brand.modalPrimaryBackground,
-      padding: 20,
+      paddingTop: 10,
+      paddingHorizontal: 20,
     },
     controlsContainer: {
       marginTop: 'auto',
       marginHorizontal: 20,
-      marginBottom: Platform.OS === 'ios' ? 108 : 80,
+      marginBottom: 10,
       position: 'relative',
     },
     overlay: {
       flex: 1,
       backgroundColor: 'rgba(0,0,0,0.5)',
+      paddingTop: 65,
     },
     headerView: {
       alignItems: 'flex-end',
-      marginTop: 65,
-      backgroundColor: ColorPallet.brand.modalPrimaryBackground,
       height: 55,
       paddingTop: 10,
       paddingRight: 20,
-      borderTopRightRadius: 10,
-      borderTopLeftRadius: 10,
     },
     bodyText: {
       ...TextTheme.modalNormal,
@@ -291,34 +293,27 @@ const CommonRemoveModal: React.FC<CommonRemoveModalProps> = ({ usage, visible, o
   return (
     <Modal transparent={true} visible={visible} animationType="slide">
       <View style={styles.overlay}>
-        <View style={[styles.headerView]}>
-          <TouchableOpacity
-            accessibilityLabel={t('Global.Close')}
-            accessibilityRole={'button'}
-            testID={testIdWithKey('Close')}
-            onPress={() => onCancel && onCancel()}
-            hitSlop={hitSlop}
-          >
-            <Icon name={'close'} size={42} color={ColorPallet.brand.modalIcon} />
-          </TouchableOpacity>
-        </View>
-        <SafeAreaView
-          edges={['left', 'right', 'bottom']}
-          style={[
-            {
-              backgroundColor: ColorPallet.brand.modalPrimaryBackground,
-            },
-          ]}
-        >
-          <ScrollView style={[styles.container]}>
+        <SafeAreaView edges={['left', 'right', 'bottom']} style={styles.safeAreaView}>
+          <View style={styles.headerView}>
+            <TouchableOpacity
+              accessibilityLabel={t('Global.Close')}
+              accessibilityRole={'button'}
+              testID={testIdWithKey('Close')}
+              onPress={() => onCancel && onCancel()}
+              hitSlop={hitSlop}
+            >
+              <Icon name={'close'} size={42} color={ColorPallet.brand.modalIcon} />
+            </TouchableOpacity>
+          </View>
+          <ScrollView style={styles.container}>
             <>
               {headerImageForType()}
               {contentForType()}
             </>
           </ScrollView>
-          <View style={[styles.controlsContainer]}>
+          <View style={styles.controlsContainer}>
             <ContentGradient backgroundColor={ColorPallet.brand.modalPrimaryBackground} height={30} />
-            <View style={[{ paddingTop: 10 }]}>
+            <View style={{ paddingTop: 10 }}>
               <Button
                 title={titleForConfirmButton()}
                 accessibilityLabel={labelForConfirmButton()}
@@ -329,7 +324,7 @@ const CommonRemoveModal: React.FC<CommonRemoveModalProps> = ({ usage, visible, o
                 }
               />
             </View>
-            <View style={[{ paddingTop: 10 }]}>
+            <View style={{ paddingTop: 10 }}>
               <Button
                 title={t('Global.Cancel')}
                 accessibilityLabel={t('Global.Cancel')}

packages/legacy/core/App/components/tour/AttachTourStep.tsx

@@ -1,5 +1,5 @@
 import React, { cloneElement, ReactElement, ReactNode, RefObject, useContext, useEffect, useRef } from 'react'
-import { StyleProp, View } from 'react-native'
+import { StyleProp, useWindowDimensions, View } from 'react-native'
 
 import { TourContext } from '../../contexts/tour/tour-context'
 import { TourID } from '../../types/tour'
@@ -46,7 +46,7 @@ export interface AttachTourStepProps<T> {
  */
 export function AttachTourStep<T>({ children, fill = false, index, tourID }: AttachTourStepProps<T>): ReactElement {
   const { currentStep, currentTour, changeSpot } = useContext(TourContext)
-
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions()
   const childRef = useRef<View>(null)
 
   useEffect(() => {
@@ -55,7 +55,7 @@ export function AttachTourStep<T>({ children, fill = false, index, tourID }: Att
         changeSpot({ height, width, x, y })
       })
     }
-  }, [changeSpot, currentTour, currentStep, index])
+  }, [windowWidth, windowHeight, changeSpot, currentTour, currentStep, index])
 
   const { style, ...rest } = children.props
   const childStyle = style ?? {}

packages/legacy/core/App/components/tour/TourBox.tsx

@@ -1,9 +1,9 @@
 import React, { ReactElement, ReactNode, useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyleSheet, Text, TouchableOpacity, View, useWindowDimensions } from 'react-native'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialIcons'
 
-import { tourMargin, hitSlop } from '../../constants'
+import { hitSlop } from '../../constants'
 import { useTheme } from '../../contexts/theme'
 import { RenderProps } from '../../contexts/tour/tour-context'
 import { testIdWithKey } from '../../utils/testable'
@@ -74,7 +74,6 @@ export function TourBox(props: TourBoxProps): ReactElement {
     stepsOutOf,
   } = props
   const { TextTheme, ColorPallet, OnboardingTheme } = useTheme()
-  const { width } = useWindowDimensions()
   const iconSize = 30
   const dismissIconName = 'clear'
   const iconColor = ColorPallet.notification.infoIcon
@@ -89,7 +88,7 @@ export function TourBox(props: TourBoxProps): ReactElement {
       borderRadius: 5,
       borderWidth: 1,
       padding: 20,
-      width: width - tourMargin * 2,
+      flex: 1,
       margin: 'auto',
     },
     headerContainer: {

packages/legacy/core/App/components/tour/TourOverlay.tsx

@@ -24,7 +24,7 @@ interface TourOverlayProps {
 export const TourOverlay = (props: TourOverlayProps) => {
   const { width: windowWidth, height: windowHeight } = useWindowDimensions()
   const { color, currentTour, currentStep, onBackdropPress, backdropOpacity, changeSpot, spot, tourStep } = props
-
+  const [viewBox, setViewBox] = useState(`0 0 ${windowWidth} ${windowHeight}`)
   const { next, previous, start, stop } = useContext(TourContext)
 
   const [tooltipStyle, setTooltipStyle] = useState<ViewStyle>({})
@@ -52,11 +52,12 @@ export const TourOverlay = (props: TourOverlayProps) => {
     const gapBetweenSpotAndTooltip = 50
     // if origin spot (ie. no spotlight)
     if (spot.x === 0 && spot.y === 0) {
-      const top = windowHeight / 5
+      // a relative margin so that the tooltip doesn't start at the very top of the screen
+      const oneSixthOfScreenHeight = windowHeight / 6
       setTooltipStyle({
         left: tourMargin,
         right: tourMargin,
-        top,
+        top: oneSixthOfScreenHeight,
       })
       // if spot is in the lower half of the screen
     } else if (spot.y >= windowHeight / 2) {
@@ -75,7 +76,13 @@ export const TourOverlay = (props: TourOverlayProps) => {
         top,
       })
     }
-  }, [spot.height, spot.width, spot.x, spot.y])
+  }, [windowWidth, windowHeight, spot.width, spot.height, spot.x, spot.y])
+
+  useEffect(() => {
+    // + 1 pixel to account for an svg size rounding issue that would cause
+    // a tiny gap around the overlay
+    setViewBox(`0 0 ${windowWidth + 1} ${windowHeight + 1}`)
+  }, [windowWidth, windowHeight])
 
   return (
     <Modal
@@ -84,24 +91,30 @@ export const TourOverlay = (props: TourOverlayProps) => {
       transparent={true}
       visible={currentStep !== undefined}
     >
-      <View style={{ height: windowHeight, width: windowWidth }} testID={testIdWithKey('SpotlightOverlay')}>
+      <View style={{ height: windowHeight + 1, width: windowWidth + 1 }} testID={testIdWithKey('SpotlightOverlay')}>
         <Svg
           testID={testIdWithKey('SpotOverlay')}
-          height="100%"
-          width="100%"
-          viewBox={`0 0 ${windowWidth} ${windowHeight}`}
+          height={windowHeight + 1}
+          width={windowWidth + 1}
+          viewBox={viewBox}
           onPress={handleBackdropPress}
           shouldRasterizeIOS={true}
           renderToHardwareTextureAndroid={true}
         >
           <Defs>
-            <Mask id="mask" x={0} y={0} height="100%" width="100%">
-              <Rect height="100%" width="100%" fill="#fff" />
+            <Mask id="mask" x={0} y={0} height={windowHeight + 1} width={windowWidth + 1}>
+              <Rect height={windowHeight + 1} width={windowWidth + 1} fill="#fff" />
               <SpotCutout />
             </Mask>
           </Defs>
 
-          <Rect height="100%" width="100%" fill={color} mask="url(#mask)" opacity={backdropOpacity} />
+          <Rect
+            height={windowHeight + 1}
+            width={windowWidth + 1}
+            fill={color}
+            mask="url(#mask)"
+            opacity={backdropOpacity}
+          />
         </Svg>
 
         <View

packages/legacy/core/App/navigators/RootStack.tsx

@@ -273,7 +273,7 @@ const RootStack: React.FC = () => {
         />
         <Stack.Screen name={Stacks.ContactStack} component={ContactStack} />
         <Stack.Screen name={Stacks.NotificationStack} component={NotificationStack} />
-        <Stack.Screen name={Stacks.ConnectionStack} component={DeliveryStack} />
+        <Stack.Screen name={Stacks.ConnectionStack} component={DeliveryStack} options={{ gestureEnabled: false }} />
         <Stack.Screen name={Stacks.ProofRequestsStack} component={ProofRequestStack} />
       </Stack.Navigator>
     )

packages/legacy/core/App/screens/Connection.tsx

@@ -3,7 +3,7 @@ import { CommonActions, useFocusEffect } from '@react-navigation/native'
 import { StackScreenProps } from '@react-navigation/stack'
 import React, { useCallback, useEffect, useMemo, useReducer, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { AccessibilityInfo, Modal, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { AccessibilityInfo, BackHandler, Modal, ScrollView, StyleSheet, Text, View } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 
 import Button, { ButtonType } from '../components/buttons/Button'
@@ -119,6 +119,11 @@ const Connection: React.FC<ConnectionProps> = ({ navigation, route }) => {
     navigation.getParent()?.navigate(TabStacks.HomeStack, { screen: Screens.Home })
   }
 
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => true)
+    return () => backHandler.remove()
+  }, [])
+
   useEffect(() => {
     if (state.shouldShowDelayMessage && !state.notificationRecord) {
       if (autoRedirectConnectionToHome) {

packages/legacy/core/App/screens/ProofRequest.tsx

@@ -5,7 +5,7 @@ import {
   AnonCredsRequestedAttributeMatch,
   AnonCredsRequestedPredicateMatch,
 } from '@aries-framework/anoncreds'
-import { CredentialExchangeRecord } from '@aries-framework/core'
+import { CredentialExchangeRecord, ProofState } from '@aries-framework/core'
 import { useConnectionById, useProofById } from '@aries-framework/react-hooks'
 import { Attribute, Predicate } from '@hyperledger/aries-oca/build/legacy'
 import { useIsFocused } from '@react-navigation/core'
@@ -500,7 +500,12 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, route }) => {
             testID={testIdWithKey('Share')}
             buttonType={ButtonType.Primary}
             onPress={handleAcceptPress}
-            disabled={!hasAvailableCredentials || !hasSatisfiedPredicates(getCredentialsFields()) || revocationOffense}
+            disabled={
+              !hasAvailableCredentials ||
+              !hasSatisfiedPredicates(getCredentialsFields()) ||
+              revocationOffense ||
+              proof?.state !== ProofState.RequestReceived
+            }
           />
         </View>
         <View style={styles.footerButton}>

packages/legacy/core/App/screens/ProofRequesting.tsx

@@ -117,8 +117,6 @@ const ProofRequesting: React.FC<ProofRequestingProps> = ({ route, navigation })
     buttonContainer: {
       marginTop: 'auto',
       marginHorizontal: 20,
-    },
-    footerButton: {
       marginBottom: 10,
     },
   })
@@ -192,7 +190,7 @@ const ProofRequesting: React.FC<ProofRequestingProps> = ({ route, navigation })
   }, [proofRecord])
 
   return (
-    <SafeAreaView style={styles.container} edges={['left', 'right']}>
+    <SafeAreaView style={styles.container} edges={['left', 'right', 'bottom']}>
       <ScrollView>
         <View style={styles.qrContainer}>
           {generating && <LoadingIndicator />}
@@ -204,16 +202,14 @@ const ProofRequesting: React.FC<ProofRequestingProps> = ({ route, navigation })
         </View>
       </ScrollView>
       <View style={styles.buttonContainer}>
-        <View style={styles.footerButton}>
-          <Button
-            title={t('Verifier.RefreshQR')}
-            accessibilityLabel={t('Verifier.RefreshQR')}
-            testID={testIdWithKey('GenerateNewQR')}
-            buttonType={ButtonType.Primary}
-            onPress={() => createProofRequest()}
-            disabled={generating}
-          />
-        </View>
+        <Button
+          title={t('Verifier.RefreshQR')}
+          accessibilityLabel={t('Verifier.RefreshQR')}
+          testID={testIdWithKey('GenerateNewQR')}
+          buttonType={ButtonType.Primary}
+          onPress={() => createProofRequest()}
+          disabled={generating}
+        />
       </View>
     </SafeAreaView>
   )