feat: new proof request loading screen (#1243)

Signed-off-by: Jason C. Leach <[email protected]>
openwallet-foundation · Oct 3, 2024 · fd3f90d · fd3f90d
1 parent 6a2348b
commit fd3f90d
Show file tree

Hide file tree

Showing 36 changed files with 2,967 additions and 2,462 deletions.
diff --git a/packages/legacy/core/App/components/animated/RecordLoading.tsx b/packages/legacy/core/App/components/animated/RecordLoading.tsx
@@ -1,55 +1,74 @@
 import React, { useEffect, useRef } from 'react'
-import { View, StyleSheet, Animated } from 'react-native'
+import { StyleProp, ViewStyle, View, StyleSheet, Animated, useWindowDimensions } from 'react-native'
 
 import { useTheme } from '../../contexts/theme'
 import { testIdWithKey } from '../../utils/testable'
 
+type RecordLoadingProps = {
+  style?: StyleProp<ViewStyle>
+}
+
 const fadeTiming: Animated.TimingAnimationConfig = {
-  toValue: 0.2,
+  toValue: 0.4,
   duration: 1100,
   useNativeDriver: true,
 }
 
-const RecordLoading: React.FC = () => {
+const borderRadius = 10
+
+const RecordLoading: React.FC<RecordLoadingProps> = ({ style }) => {
+  const { width } = useWindowDimensions()
+  const padding = width * 0.05
+  const logoHeight = width * 0.12
   const { ColorPallet } = useTheme()
   const rowFadeAnim = useRef(new Animated.Value(1))
-  const style = StyleSheet.create({
+  const myStyle = StyleSheet.create({
     container: {
       flexDirection: 'column',
     },
     rectangle: {
-      backgroundColor: ColorPallet.grayscale.veryLightGrey,
+      backgroundColor: ColorPallet.grayscale.lightGrey,
       height: 30,
-      marginVertical: 10,
+      marginVertical: 5,
+      borderRadius,
     },
-    line: {
+    margin: {
       backgroundColor: ColorPallet.grayscale.lightGrey,
-      height: 1,
-      marginVertical: 5,
+      width: 40,
+      borderTopLeftRadius: borderRadius,
+      borderBottomLeftRadius: borderRadius,
+    },
+    logo: {
+      marginLeft: -1 * logoHeight + padding,
+      marginTop: padding,
+      backgroundColor: ColorPallet.grayscale.lightGrey,
+      height: logoHeight,
+      width: logoHeight,
+      borderRadius,
     },
   })
 
   useEffect(() => {
     Animated.loop(Animated.timing(rowFadeAnim.current, fadeTiming)).start()
   }, [])
 
-  const makeARow = () => {
-    return (
-      <View style={{ flexDirection: 'column' }}>
-        <View style={[style.rectangle, { width: '35%' }]}></View>
-        <View style={[style.rectangle, { width: '85%' }]}></View>
-        <View style={style.line} />
-      </View>
-    )
-  }
-
   return (
-    <View style={style.container} testID={testIdWithKey('RecordLoading')}>
-      <Animated.View style={{ opacity: rowFadeAnim.current }}>
-        {makeARow()}
-        {makeARow()}
-      </Animated.View>
-    </View>
+    <Animated.View
+      style={[{ opacity: rowFadeAnim.current, backgroundColor: ColorPallet.grayscale.white, borderRadius: 15 }, style]}
+    >
+      <View style={myStyle.container} testID={testIdWithKey('RecordLoading')}>
+        <View style={{ flexDirection: 'row' }}>
+          <View style={myStyle.margin} />
+          <View style={myStyle.logo} />
+          <View style={{ flexGrow: 1, marginLeft: 15, marginTop: 15, marginBottom: 15 }}>
+            <View style={[myStyle.rectangle, { width: '100%', height: 20 }]} />
+            <View style={[myStyle.rectangle, { width: '75%', height: 25 }]} />
+            <View style={[myStyle.rectangle, { width: '35%', height: 20, marginTop: 20 }]} />
+            <View style={[myStyle.rectangle, { width: '90%', height: 25 }]} />
+          </View>
+        </View>
+      </View>
+    </Animated.View>
   )
 }
 

diff --git a/packages/legacy/core/App/components/listItems/NotificationListItem.tsx b/packages/legacy/core/App/components/listItems/NotificationListItem.tsx
@@ -146,12 +146,14 @@ const NotificationListItem: React.FC<NotificationListItemProps> = ({
   })
 
   const isReceivedProof = useMemo(() => {
-    return notificationType === NotificationType.ProofRequest &&
-    ((notification as ProofExchangeRecord).state === ProofState.Done ||
-      (notification as ProofExchangeRecord).state === ProofState.PresentationSent)
+    return (
+      notificationType === NotificationType.ProofRequest &&
+      ((notification as ProofExchangeRecord).state === ProofState.Done ||
+        (notification as ProofExchangeRecord).state === ProofState.PresentationSent)
+    )
   }, [notificationType, notification])
 
-  const toggleDeclineModalVisible = useCallback(() => setDeclineModalVisible(prev => !prev), [])
+  const toggleDeclineModalVisible = useCallback(() => setDeclineModalVisible((prev) => !prev), [])
 
   const declineProofRequest = useCallback(async () => {
     try {
@@ -236,57 +238,57 @@ const NotificationListItem: React.FC<NotificationListItemProps> = ({
       let details
       switch (notificationType) {
         case NotificationType.BasicMessage:
-          details = ({
+          details = {
             type: InfoBoxType.Info,
             title: t('Home.NewMessage'),
             body: theirLabel ? `${theirLabel} ${t('Home.SentMessage')}` : t('Home.ReceivedMessage'),
             buttonTitle: t('Home.ViewMessage'),
-          })
+          }
           break
         case NotificationType.CredentialOffer:
-          details = ({
+          details = {
             type: InfoBoxType.Info,
             title: t('CredentialOffer.NewCredentialOffer'),
             body: `${name + (version ? ` v${version}` : '')}`,
             buttonTitle: undefined,
-          })
+          }
           break
         case NotificationType.ProofRequest: {
           const proofId = (notification as ProofExchangeRecord).id
           agent?.proofs.findRequestMessage(proofId).then((message) => {
             if (message instanceof V1RequestPresentationMessage && message.indyProofRequest) {
-              details = ({
+              details = {
                 type: InfoBoxType.Info,
                 title: t('ProofRequest.NewProofRequest'),
                 body: message.indyProofRequest.name ?? message.comment ?? '',
                 buttonTitle: undefined,
-              })
+              }
             } else {
-              details = ({
+              details = {
                 type: InfoBoxType.Info,
                 title: t('ProofRequest.NewProofRequest'),
                 body: '',
                 buttonTitle: undefined,
-              })
+              }
             }
           })
           break
         }
         case NotificationType.Revocation:
-          details =  ({
+          details = {
             type: InfoBoxType.Error,
             title: t('CredentialDetails.NewRevoked'),
             body: `${name + (version ? ` v${version}` : '')}`,
             buttonTitle: undefined,
-          })
+          }
           break
         case NotificationType.Custom:
-          details =  ({
+          details = {
             type: InfoBoxType.Info,
             title: t(customNotification?.title as any),
             body: t(customNotification?.description as any),
             buttonTitle: t(customNotification?.buttonTitle as any),
-          })
+          }
           break
         default:
           throw new Error('NotificationType was not set correctly.')
@@ -296,7 +298,15 @@ const NotificationListItem: React.FC<NotificationListItemProps> = ({
     }
 
     getDetails()
-  }, [notification, notificationType, connection, store.preferences.alternateContactNames, t, agent, customNotification])
+  }, [
+    notification,
+    notificationType,
+    connection,
+    store.preferences.alternateContactNames,
+    t,
+    agent,
+    customNotification,
+  ])
 
   useEffect(() => {
     let onPress: () => void
@@ -313,8 +323,8 @@ const NotificationListItem: React.FC<NotificationListItemProps> = ({
         break
       case NotificationType.CredentialOffer:
         onPress = () => {
-          navigation.getParent()?.navigate(Stacks.NotificationStack, {
-            screen: Screens.CredentialOffer,
+          navigation.getParent()?.navigate(Stacks.ConnectionStack, {
+            screen: Screens.Connection,
             params: { credentialId: notification.id },
           })
         }
@@ -333,8 +343,8 @@ const NotificationListItem: React.FC<NotificationListItemProps> = ({
           }
         } else {
           onPress = () => {
-            navigation.getParent()?.navigate(Stacks.NotificationStack, {
-              screen: Screens.ProofRequest,
+            navigation.getParent()?.navigate(Stacks.ConnectionStack, {
+              screen: Screens.Connection,
               params: { proofId: (notification as ProofExchangeRecord).id },
             })
           }

diff --git a/packages/legacy/core/App/components/misc/CredentialCard11.tsx b/packages/legacy/core/App/components/misc/CredentialCard11.tsx
@@ -168,7 +168,7 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
       height: 150,
       aspectRatio: 1,
       resizeMode: 'contain',
-      borderRadius: 10,
+      borderRadius: borderRadius,
     },
     statusContainer: {
       backgroundColor: 'rgba(0, 0, 0, 0)',