chore: minor wallet improvements (#243)

Signed-off-by: Jan <[email protected]>
animo · Nov 26, 2024 · b2aacf6 · b2aacf6
1 parent 5ecf33c
commit b2aacf6
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 27 deletions.
diff --git a/apps/easypid/src/features/onboarding/screens/assets/ScanCard.tsx b/apps/easypid/src/features/onboarding/screens/assets/ScanCard.tsx
@@ -1,15 +1,31 @@
-import Animated, { useAnimatedProps } from 'react-native-reanimated'
+import { useEffect } from 'react'
+import Animated, { useAnimatedProps, useSharedValue, withSequence } from 'react-native-reanimated'
 import { withTiming } from 'react-native-reanimated'
 import { withRepeat } from 'react-native-reanimated'
 import { Defs, G, LinearGradient, Path, Stop, Svg } from 'react-native-svg'
 
-// Create animated version of G component
-const AnimatedG = Animated.createAnimatedComponent(G)
+// biome-ignore lint/suspicious/noExplicitAny: By default G does not allow style, but Animated.createAnimatedComponent does
+const AnimatedG = Animated.createAnimatedComponent(G) as any
 
 export function ScanCard() {
+  const translateX = useSharedValue(0)
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    translateX.value = withRepeat(
+      withSequence(
+        withTiming(0, { duration: 500 }),
+        withTiming(120, { duration: 3000 }),
+        withTiming(120, { duration: 500 }),
+        withTiming(0, { duration: 500 })
+      ),
+      -1 // Infinite repeats
+    )
+  }, [])
+
   const animatedProps = useAnimatedProps(() => {
     return {
-      transform: [{ translateX: withRepeat(withTiming(100, { duration: 2500 }), -1, true) }],
+      transform: [{ translateX: translateX.value }],
     }
   })
 
@@ -67,7 +83,7 @@ export function ScanCard() {
         d="M22.357 173.723C22.1444 173.723 21.9319 173.66 21.7513 173.532L14.5469 168.527C14.0687 168.187 13.9412 167.528 14.2812 167.05C14.6213 166.572 15.2801 166.445 15.7583 166.785L22.0913 171.184L33.8861 154.448C34.2261 153.97 34.8849 153.853 35.3631 154.193C35.8413 154.533 35.9582 155.192 35.6181 155.67L23.2177 173.266C23.0158 173.564 22.6864 173.713 22.3463 173.713L22.357 173.723Z"
         fill="#7294E8"
       />
-      <AnimatedG animatedProps={animatedProps}>
+      <AnimatedG style={animatedProps}>
         <Path
           d="M121.405 51.4248L44.3483 64.4719C39.43 65.3046 36.118 69.9667 36.9508 74.885L43.8034 115.357C44.6361 120.275 49.2982 123.587 54.2165 122.754L131.273 109.707C136.192 108.875 139.504 104.213 138.671 99.2943L131.818 58.8223C130.986 53.9041 126.324 50.5921 121.405 51.4248Z"
           fill="white"

diff --git a/apps/easypid/src/features/onboarding/screens/wallet-explanation.tsx b/apps/easypid/src/features/onboarding/screens/wallet-explanation.tsx
@@ -7,7 +7,6 @@ import Carousel from 'react-native-reanimated-carousel'
 import type { ICarouselInstance } from 'react-native-reanimated-carousel'
 
 import { useImageScaler } from 'packages/app/src/hooks'
-import { ScanCard } from './assets/ScanCard'
 import { WalletExplanation } from './assets/WalletExplanation'
 import { WalletHowItWorks } from './assets/WalletHowItWorks'
 import { WalletStoring } from './assets/WalletStoring'
@@ -19,7 +18,7 @@ interface OnboardingWalletExplanationProps {
 
 const SLIDES = [
   {
-    image: <ScanCard />,
+    image: <WalletExplanation />,
     title: 'This is your wallet',
     subtitle:
       'Add digital cards with your information, and  share them easily with others. It’s like having your wallet on your phone.',

diff --git a/apps/easypid/src/features/onboarding/screens/welcome.tsx b/apps/easypid/src/features/onboarding/screens/welcome.tsx
@@ -16,7 +16,7 @@ export default function OnboardingWelcome({ goToNextStep }: OnboardingWelcomePro
         pos="absolute"
         source={welcomeBackground}
         resizeMode="cover"
-        h={Dimensions.get('window').height / 2}
+        h={Dimensions.get('window').height / 1.8}
         mt="$-4"
         w="100%"
         top={0}
@@ -36,7 +36,7 @@ export default function OnboardingWelcome({ goToNextStep }: OnboardingWelcomePro
               }}
             />
           </YStack>
-          <Stack h="$10" />
+          <Stack h="$11" />
           <YStack gap="$4" jc="center" ai="center">
             <Heading fontSize={32}>Animo EasyPID</Heading>
             <Paragraph px="$2" ta="center">

diff --git a/apps/easypid/src/features/receive/FunkeCredentialNotificationScreen.tsx b/apps/easypid/src/features/receive/FunkeCredentialNotificationScreen.tsx
@@ -165,7 +165,6 @@ export function FunkeCredentialNotificationScreen() {
       backgroundColor: '#ffffff', // Default to a white background for now
       credentialIds: [getCredentialForDisplayId(receivedRecord)],
     })
-
     setIsCompleted(true)
   }
 

diff --git a/apps/easypid/src/features/receive/slides/CredentialErrorSlide.tsx b/apps/easypid/src/features/receive/slides/CredentialErrorSlide.tsx
@@ -30,7 +30,7 @@ export const CredentialErrorSlide = ({ reason, onCancel }: CredentialErrorSlideP
           )}
         </YStack>
       </YStack>
-      <Stack borderTopWidth="$0.5" borderColor="$grey-200" pt="$4" mx="$-4" px="$4">
+      <Stack borderTopWidth="$0.5" borderColor="$grey-200" py="$4" mx="$-4" px="$4">
         <Button.Solid scaleOnPress onPress={onCancel}>
           Go to wallet <HeroIcons.ArrowRight size={20} color="$white" />
         </Button.Solid>

diff --git a/apps/easypid/src/features/receive/slides/CredentialRetrievalSlide.tsx b/apps/easypid/src/features/receive/slides/CredentialRetrievalSlide.tsx
@@ -4,6 +4,7 @@ import {
   Button,
   Heading,
   HeroIcons,
+  Loader,
   Paragraph,
   ScrollView,
   Spacer,
@@ -57,6 +58,7 @@ export const CredentialRetrievalSlide = ({
   const [isStoring, setIsStoring] = useState(false)
   const isCompleteAndAllowed = isAllowedToComplete && isCompleted
   const isStoringOrCompleted = isStoring || isCompleted
+  const isAllowedToAccept = attributes && Object.keys(attributes).length > 0
 
   const handleAccept = async () => {
     setIsStoring(true)
@@ -195,15 +197,22 @@ export const CredentialRetrievalSlide = ({
                 mx="$-4"
                 maxHeight={scrollViewHeight}
                 bg="$white"
+                contentContainerStyle={{ flexGrow: 1 }}
               >
-                {scrollViewHeight && (
-                  <CredentialAttributes
-                    headerStyle="small"
-                    borderStyle="large"
-                    attributeWeight="medium"
-                    subject={attributes}
-                    disableHeader
-                  />
+                {scrollViewHeight && isAllowedToAccept ? (
+                  <AnimatedStack key="credential-attributes" entering={FadeIn.duration(200)}>
+                    <CredentialAttributes
+                      headerStyle="small"
+                      borderStyle="large"
+                      attributeWeight="medium"
+                      subject={attributes}
+                      disableHeader
+                    />
+                  </AnimatedStack>
+                ) : (
+                  <YStack fg={1} jc="center" ai="center">
+                    <Loader />
+                  </YStack>
                 )}
                 <Spacer size="$6" />
               </ScrollView>
@@ -229,7 +238,12 @@ export const CredentialRetrievalSlide = ({
             Go to wallet <HeroIcons.ArrowRight size={20} color="$white" />
           </Button.Solid>
         ) : (
-          <DualResponseButtons align="horizontal" onAccept={handleAccept} onDecline={handleDecline} />
+          <DualResponseButtons
+            align="horizontal"
+            isLoading={!isAllowedToAccept}
+            onAccept={handleAccept}
+            onDecline={handleDecline}
+          />
         )}
       </AnimatedStack>
     </YStack>

diff --git a/apps/easypid/src/features/share/components/RequestPurposeSection.tsx b/apps/easypid/src/features/share/components/RequestPurposeSection.tsx
@@ -14,7 +14,8 @@ import {
 } from '@package/ui'
 import type { DisplayImage } from 'packages/agent/src'
 import { useState } from 'react'
-import { ZoomIn } from 'react-native-reanimated'
+import React from 'react'
+import { FadeIn, ZoomIn } from 'react-native-reanimated'
 import { VerificationAnalysisIcon } from './VerificationAnalysisIcon'
 
 interface RequestPurposeSectionProps {
@@ -35,10 +36,12 @@ export function RequestPurposeSection({ purpose, logo, verificationAnalysis }: R
       <YStack gap="$2">
         {verificationAnalysis?.result?.validRequest === 'no' && (
           <AnimatedStack
+            entering={FadeIn}
             style={pressStyle}
             onPressIn={handlePressIn}
             onPressOut={handlePressOut}
             onPress={toggleAnalysisModal}
+            mt="$-2"
             mb="$4"
           >
             <MessageBox

diff --git a/apps/easypid/src/features/share/components/VerificationAnalysisIcon.tsx b/apps/easypid/src/features/share/components/VerificationAnalysisIcon.tsx
@@ -6,9 +6,9 @@ interface VerificationAnalysisIconProps {
 }
 
 export function VerificationAnalysisIcon({ verificationAnalysis }: VerificationAnalysisIconProps) {
-  if (!verificationAnalysis.result || verificationAnalysis.isLoading) return <Spinner scale={0.8} />
+  if (verificationAnalysis.isLoading) return <Spinner scale={0.8} />
 
-  if (verificationAnalysis.result.validRequest === 'could_not_determine') {
+  if (!verificationAnalysis.result || verificationAnalysis.result.validRequest === 'could_not_determine') {
     // AI doesn't know or an error was thrown
     return null
   }

diff --git a/apps/easypid/src/features/wallet/FunkeFederationDetailScreen.tsx b/apps/easypid/src/features/wallet/FunkeFederationDetailScreen.tsx
@@ -61,16 +61,18 @@ export function FunkeFederationDetailScreen({
                 <HeroIcons.BuildingOffice color="$grey-700" />
               </Circle>
             )}
-            <Heading variant="h2">{name}</Heading>
+            <Heading flex={1} numberOfLines={3} variant="h2">
+              {name || 'Unknown organization'}
+            </Heading>
           </XStack>
           <YStack gap="$4" py="$2">
             <YStack gap="$2">
               <Heading variant="sub2">Trusted by</Heading>
               <Paragraph>
                 {trustedEntities.length > 0 ? (
-                  <>A list of organizations and whether they have approved {name}.</>
+                  <>A list of organizations and whether they have approved {name || 'unknown organization'}.</>
                 ) : (
-                  <>There are no organizations that have approved {name}.</>
+                  <>There are no organizations that have approved {name || 'unknown organization'}.</>
                 )}
               </Paragraph>
             </YStack>

diff --git a/apps/easypid/src/use-cases/ValidateVerification.ts b/apps/easypid/src/use-cases/ValidateVerification.ts
@@ -43,7 +43,14 @@ export const analyzeVerification = async ({
       throw new Error(`Request to AI returned ${response.status}`)
     }
 
-    return await response.json()
+    const data = await response.json()
+
+    console.debug(
+      'AI analysed verification request and returned the following response:',
+      JSON.stringify(data, null, 2)
+    )
+
+    return data
   } catch (error) {
     console.error('AI analysis failed:', error)
     return {
-Original file line number
+Diff line change
@@ Expand Up / @@ -165,7 +165,6 @@ export function FunkeCredentialNotificationScreen() { @@
           backgroundColor: '#ffffff', // Default to a white background for now
           credentialIds: [getCredentialForDisplayId(receivedRecord)],
         })
         setIsCompleted(true)
       }
@@ Expand Down @@