design feedback

ava-labs · Feb 10, 2025 · cfe1ce4 · cfe1ce4
1 parent df6313f
commit cfe1ce4
Show file tree

Hide file tree

Showing 30 changed files with 295 additions and 220 deletions.
diff --git a/packages/core-mobile/app/new/common/components/BlurredBackgroundView.tsx b/packages/core-mobile/app/new/common/components/BlurredBackgroundView.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
-import { GlassView, Separator, View } from '@avalabs/k2-alpine'
+import { alpha, Separator, useTheme, View } from '@avalabs/k2-alpine'
 import { Platform } from 'react-native'
+import { BlurView } from 'expo-blur'
 
 const BlurredBackgroundView = ({
   separator
@@ -10,13 +11,23 @@ const BlurredBackgroundView = ({
     position: 'top' | 'bottom'
   }
 }): JSX.Element => {
+  const { theme } = useTheme()
+
   return (
     <View style={{ flex: 1 }}>
       {separator?.position === 'top' && (
         <Separator sx={{ opacity: separator.opacity }} />
       )}
       {Platform.OS === 'ios' ? (
-        <GlassView style={{ flex: 1 }} />
+        <BlurView
+          style={{
+            flex: 1,
+            // alpha('#afafd0', 0.1) is a color value found through experimentation
+            // to make the blur effect appear the same as $surfacePrimary(neutral-850) in dark mode.
+            backgroundColor: theme.isDark ? alpha('#afafd0', 0.1) : undefined
+          }}
+          intensity={75}
+        />
       ) : (
         <View sx={{ flex: 1, backgroundColor: '$surfacePrimary' }} />
       )}

diff --git a/packages/core-mobile/app/new/common/components/SimpleTextInput.tsx b/packages/core-mobile/app/new/common/components/SimpleTextInput.tsx
@@ -10,11 +10,13 @@ import {
 export const SimpleTextInput = ({
   name,
   setName,
-  placeholder
+  placeholder,
+  maxLength
 }: {
   name: string
   setName: (name: string) => void
   placeholder?: string
+  maxLength?: number
 }): React.JSX.Element => {
   const {
     theme: { colors }
@@ -23,7 +25,7 @@ export const SimpleTextInput = ({
     <View
       sx={{
         marginTop: 27,
-        paddingHorizontal: 13,
+        paddingRight: 13,
         backgroundColor: colors.$surfaceSecondary,
         borderRadius: 12,
         flexDirection: 'row',
@@ -38,11 +40,13 @@ export const SimpleTextInput = ({
           marginRight: 13,
           height: 44,
           fontSize: 16,
-          color: colors.$textPrimary
+          color: colors.$textPrimary,
+          backgroundColor: 'transparent'
         }}
         value={name}
         onChangeText={setName}
         placeholder={placeholder}
+        maxLength={maxLength}
       />
       {name.length !== 0 && (
         <TouchableOpacity onPress={() => setName('')}>

diff --git a/packages/core-mobile/app/new/common/consts/screenOptions.tsx b/packages/core-mobile/app/new/common/consts/screenOptions.tsx
@@ -112,7 +112,7 @@ export const homeScreenOptions: StackNavigationOptions = {
         height: '100%',
         justifyContent: 'center'
       }}>
-      <Link href="/settings/">
+      <Link href="/settings/" asChild>
         <AccountSettingBarButton />
       </Link>
     </View>

diff --git a/...mon/hooks/useAnimatedNavigationHeader.tsx → ...ommon/hooks/useFadingHeaderNavigation.tsx b/...mon/hooks/useAnimatedNavigationHeader.tsx → ...ommon/hooks/useFadingHeaderNavigation.tsx
@@ -1,38 +1,62 @@
 import BlurredBackgroundView from 'common/components/BlurredBackgroundView'
 import React, { useCallback, useEffect, useState } from 'react'
 import { View } from '@avalabs/k2-alpine'
-import { LayoutChangeEvent, LayoutRectangle } from 'react-native'
+import {
+  LayoutChangeEvent,
+  LayoutRectangle,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollViewProps
+} from 'react-native'
 import { useNavigation } from 'expo-router'
+import { clamp } from 'react-native-reanimated'
 
-export const useAnimatedNavigationHeader = ({
+export const useFadingHeaderNavigation = ({
   header,
-  visibilityProgress
+  targetLayout
 }: {
-  header: JSX.Element
-  visibilityProgress: number
-}): void => {
+  header?: JSX.Element
+  targetLayout?: LayoutRectangle
+}): Partial<ScrollViewProps> => {
   const navigation = useNavigation()
   const [navigationHeaderLayout, setNavigationHeaderLayout] = useState<
     LayoutRectangle | undefined
   >(undefined)
+  const [targetHiddenProgress, setTargetHiddenProgress] = useState(0) // from 0 to 1, 0 = fully hidden, 1 = fully shown
 
   const renderHeaderBackground = useCallback(
     () => (
       <BlurredBackgroundView
-        separator={{ position: 'bottom', opacity: visibilityProgress }}
+        separator={{ position: 'bottom', opacity: targetHiddenProgress }}
       />
     ),
-    [visibilityProgress]
+    [targetHiddenProgress]
   )
 
   const handleLayout = (event: LayoutChangeEvent): void => {
     setNavigationHeaderLayout(event.nativeEvent.layout)
   }
 
+  const handleScroll = (
+    event: NativeSyntheticEvent<NativeScrollEvent>
+  ): void => {
+    if (targetLayout) {
+      setTargetHiddenProgress(
+        // calculate balance header's visibility based on the scroll position
+        clamp(
+          event.nativeEvent.contentOffset.y /
+            (targetLayout.y + targetLayout.height),
+          0,
+          1
+        )
+      )
+    }
+  }
+
   useEffect(() => {
     navigation.setOptions({
       headerBackground: renderHeaderBackground,
-      title: (
+      title: header && (
         <View
           sx={{
             overflow: 'hidden',
@@ -41,12 +65,12 @@ export const useAnimatedNavigationHeader = ({
           }}>
           <View
             sx={{
-              opacity: visibilityProgress,
+              opacity: targetHiddenProgress,
               transform: [
                 {
                   translateY:
                     (navigationHeaderLayout?.height ?? 0) *
-                    (1 - visibilityProgress)
+                    (1 - targetHiddenProgress)
                 }
               ]
             }}
@@ -60,7 +84,9 @@ export const useAnimatedNavigationHeader = ({
     navigation,
     header,
     renderHeaderBackground,
-    visibilityProgress,
+    targetHiddenProgress,
     navigationHeaderLayout
   ])
+
+  return { onScroll: handleScroll, scrollEventThrottle: 16 }
 }
diff --git a/packages/core-mobile/app/new/features/onboarding/components/Confirmation.tsx b/packages/core-mobile/app/new/features/onboarding/components/Confirmation.tsx
@@ -43,15 +43,23 @@ export const Confirmation = ({
               />
             )}
           </View>
-          <View sx={{ paddingHorizontal: 48 }}>
+          <View
+            sx={{
+              paddingHorizontal: 12,
+              maxWidth: 320,
+              alignSelf: 'center'
+            }}>
             <Text
               sx={{ marginTop: 96, textAlign: 'center' }}
               variant="heading3">
               That’s it!{'\n'} Enjoy your wallet
             </Text>
             <Text
               variant="subtitle1"
-              sx={{ textAlign: 'center', marginTop: 20 }}>
+              sx={{
+                textAlign: 'center',
+                marginTop: 20
+              }}>
               You can now start buying, swapping, sending, receiving crypto and
               collectibles with no added fees
             </Text>

diff --git a/packages/core-mobile/app/new/features/onboarding/components/CreatePin.tsx b/packages/core-mobile/app/new/features/onboarding/components/CreatePin.tsx
@@ -60,7 +60,12 @@ export const CreatePin = ({
     <BlurredBarsContentLayout>
       <KeyboardAvoidingView>
         <SafeAreaView sx={{ flex: 1 }}>
-          <ScrollView sx={{ flex: 1 }} contentContainerSx={{ padding: 16 }}>
+          <ScrollView
+            sx={{ flex: 1 }}
+            contentContainerSx={{
+              padding: 16,
+              flex: 1
+            }}>
             <ScreenHeader
               title={
                 chosenPinEntered
@@ -75,12 +80,8 @@ export const CreatePin = ({
             />
             <View
               sx={{
-                position: 'absolute',
-                alignItems: 'center',
-                left: 0,
-                right: 0,
-                top: 180,
-                padding: 20
+                flex: 1,
+                justifyContent: 'center'
               }}>
               <PinInput
                 ref={ref}
@@ -92,14 +93,13 @@ export const CreatePin = ({
               />
             </View>
           </ScrollView>
-          <View
-            sx={{
-              paddingHorizontal: 16,
-              paddingBottom: 16,
-              backgroundColor: '$surfacePrimary',
-              gap: 16
-            }}>
-            {!chosenPinEntered && (
+          {!chosenPinEntered && (
+            <View
+              sx={{
+                paddingHorizontal: 16,
+                paddingBottom: 16,
+                backgroundColor: '$surfacePrimary'
+              }}>
               <GroupList
                 data={[
                   {
@@ -113,8 +113,8 @@ export const CreatePin = ({
                   }
                 ]}
               />
-            )}
-          </View>
+            </View>
+          )}
         </SafeAreaView>
       </KeyboardAvoidingView>
     </BlurredBarsContentLayout>

diff --git a/packages/core-mobile/app/new/features/onboarding/components/EnterRecoveryPhrase.tsx b/packages/core-mobile/app/new/features/onboarding/components/EnterRecoveryPhrase.tsx
@@ -85,11 +85,16 @@ export const EnterRecoveryPhrase = ({
             size="large"
             type="primary"
             onPress={handleNext}
-            disabled={!mnemonic}>
+            disabled={
+              !mnemonic ||
+              mnemonic.trim().split(/\s+/).length < MINIMUM_MNEMONIC_WORDS
+            }>
             Import
           </Button>
         </View>
       </SafeAreaView>
     </BlurredBarsContentLayout>
   )
 }
+
+const MINIMUM_MNEMONIC_WORDS = 12
diff --git a/packages/core-mobile/app/new/features/onboarding/components/RecoveryPhrase.tsx b/packages/core-mobile/app/new/features/onboarding/components/RecoveryPhrase.tsx
@@ -26,7 +26,7 @@ export const RecoveryPhrase = ({
 
   function handleNext(): void {
     showAlert({
-      title: 'Security Warning',
+      title: 'Security warning',
       description:
         'For your security, you should not screenshot your recovery phrase. It is best to write it down and store it in a secure location.',
       buttons: [

diff --git a/packages/core-mobile/app/new/features/onboarding/components/RecoveryPhraseInput.tsx b/packages/core-mobile/app/new/features/onboarding/components/RecoveryPhraseInput.tsx
@@ -149,7 +149,8 @@ export default function RecoveryPhraseInput({
         sx={{
           backgroundColor: '$surfaceSecondary',
           borderRadius: 12,
-          padding: 16,
+          paddingVertical: 12,
+          paddingHorizontal: 16,
           minHeight: 150
         }}>
         <TextInput

diff --git a/packages/core-mobile/app/new/features/onboarding/components/SelectAvatar.tsx b/packages/core-mobile/app/new/features/onboarding/components/SelectAvatar.tsx
@@ -7,7 +7,8 @@ import {
   View,
   AvatarSelector,
   useTheme,
-  AVATAR_BLURAREA_INSET
+  AVATAR_BLURAREA_INSET,
+  isScreenSmall
 } from '@avalabs/k2-alpine'
 import { ImageSourcePropType } from 'react-native'
 import ScreenHeader from 'common/components/ScreenHeader'
@@ -48,7 +49,7 @@ export const SelectAvatar = ({
             <Avatar
               backgroundColor={colors.$surfacePrimary}
               source={avatar.source}
-              size="large"
+              size={isScreenSmall ? 100 : 'large'}
               hasBlur={true}
             />
           )}

diff --git a/packages/core-mobile/app/new/features/onboarding/components/SetWalletName.tsx b/packages/core-mobile/app/new/features/onboarding/components/SetWalletName.tsx
@@ -18,7 +18,11 @@ export const SetWalletName = ({
     <BlurredBarsContentLayout>
       <KeyboardAvoidingView>
         <SafeAreaView sx={{ flex: 1 }}>
-          <ScrollView sx={{ flex: 1 }} contentContainerSx={{ padding: 16 }}>
+          <ScrollView
+            sx={{ flex: 1 }}
+            contentContainerSx={{ padding: 16 }}
+            keyboardShouldPersistTaps="always"
+            keyboardDismissMode="on-drag">
             <ScreenHeader
               title="How would you like to name your wallet?"
               description="Add a display name for your wallet. You can change it at any time in the app’s settings"

diff --git a/packages/core-mobile/app/new/features/onboarding/components/TermsAndConditions.tsx b/packages/core-mobile/app/new/features/onboarding/components/TermsAndConditions.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import BlurredBarsContentLayout from 'common/components/BlurredBarsContentLayout'
 import {
   alpha,
@@ -10,6 +10,8 @@ import {
 } from '@avalabs/k2-alpine'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { LinearGradient } from 'expo-linear-gradient'
+import { useFadingHeaderNavigation } from 'common/hooks/useFadingHeaderNavigation'
+import { LayoutChangeEvent, LayoutRectangle } from 'react-native'
 
 export const TermsAndConditions = ({
   onAgreeAndContinue
@@ -18,11 +20,26 @@ export const TermsAndConditions = ({
 }): JSX.Element => {
   const { bottom } = useSafeAreaInsets()
   const { theme } = useTheme()
+  const [headerLayout, setHeaderLayout] = useState<
+    LayoutRectangle | undefined
+  >()
+
+  const handleHeaderLayout = (event: LayoutChangeEvent): void => {
+    setHeaderLayout(event.nativeEvent.layout)
+  }
+
+  const scrollViewProps = useFadingHeaderNavigation({
+    targetLayout: headerLayout
+  })
 
   return (
     <BlurredBarsContentLayout>
-      <ScrollView sx={{ flex: 1 }} contentContainerSx={{ padding: 16 }}>
+      <ScrollView
+        sx={{ flex: 1 }}
+        contentContainerSx={{ padding: 16 }}
+        {...scrollViewProps}>
         <Text
+          onLayout={handleHeaderLayout}
           sx={{ marginRight: 10, marginTop: 8, marginBottom: 10 }}
           variant="heading3">
           Terms and conditions