feat: enhance mobile UX, improve auth flow, and add ScrollDirectionProvider (#1451)

* fix: playwright profile test, you can send to yourself.

* fix: update IconUSDC for native app

* feat: add ripgrep to unstable tools in flake.nix

* feat: add ScrollDirectionProvider for efficient scroll tracking in React Native and Next.js applications

* feat: implement token validation to enhance session management in onboarding and account creation processes

* feat: document platform-specific code handling for web and native differences in component implementation

* feat: enhance mobile UX by fixing layout issues, improving auth flow, and refining onboarding and token activity screens

* feat: improve URL validation in swap onboarding tests for better reliability and clearer expectations on navigation outcomes

Author: 0xBigBoss

CLAUDE.md

@@ -28,6 +28,27 @@ It is acceptable to vary styles to avoid making too many changes at once.
 
 Assume the style is enforced by a linter and formatter.
 
+### Platform-Specific Code
+
+This project uses a platform-specific extension pattern to handle web vs. native differences:
+
+1. **File naming convention**:
+   - Base component: `ComponentName.tsx` - shared logic or web-specific implementation
+   - Native override: `ComponentName.native.tsx` - React Native specific implementation
+
+2. **When to create platform-specific files**:
+   - When UI components need different native implementations
+   - When using platform-specific APIs or components
+   - When optimizing for different platform performance characteristics
+   - When handling platform-specific UX patterns
+
+3. **Example pattern** (TokenActivityFeed):
+   - Web version uses RecyclerList (virtualized web list)
+   - Native version uses FlatList (React Native's optimized list)
+   - Components maintain the same API while using platform-optimized implementations
+
+When developing new features, consider whether platform-specific implementations are needed and follow this established pattern.
+
 ### Comments
 
 Focus comments solely on explaining the code's functionality and design choices, not the history of how the code was changed during our session. Ensure final code does not contain comments related to the debugging steps or conversational edits.

apps/expo/PLAN.md

@@ -2,8 +2,13 @@ import { Anchor, Container, ScrollView, YStack } from '@my/ui'
 import { useLink } from 'solito/link'
 import { IconSendLogo } from 'app/components/icons'
 import { Slot, Stack } from 'expo-router'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useHeaderHeight } from '@react-navigation/elements'
 
 export default function AuthLayout() {
+  const { top } = useSafeAreaInsets()
+  const headerHeight = useHeaderHeight()
+
   return (
     <>
       <Stack.Screen options={{ headerShown: false }} />
@@ -16,11 +21,29 @@ export default function AuthLayout() {
         }}
         flex={1}
       >
-        <YStack ai="center" f={1} position="relative">
-          <Anchor {...useLink({ href: '/' })} mx="auto" position="absolute" top={'$4'}>
+        <YStack ai="center" f={1} position="relative" px="$4">
+          <Anchor
+            {...useLink({ href: '/' })}
+            mx="auto"
+            my="$4"
+            position="absolute"
+            top={headerHeight || top || '$4'}
+          >
             <IconSendLogo size={'$4'} color={'$color12'} />
           </Anchor>
-          <ScrollView pt="$2" mt="$14" f={1} contentContainerStyle={{ flexGrow: 1 }}>
+          <ScrollView
+            pt="$2"
+            mt="$14"
+            f={1}
+            w="100%"
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={{
+              flexGrow: 1,
+              paddingTop: 60, // Space for logo
+              justifyContent: 'center',
+              width: '100%',
+            }}
+          >
             <Slot />
           </ScrollView>
         </YStack>

apps/expo/app/(auth)/_layout.tsx

@@ -0,0 +1,186 @@
+# ScrollDirectionProvider
+
+The `ScrollDirectionProvider` provides scroll direction tracking and scroll position information for React Native and Next.js applications. It detects whether users are scrolling up or down, and also tracks if they've reached the end of scrollable content.
+
+## Overview
+
+This provider creates a React context that exposes:
+
+1. Current scroll direction (up/down/null)
+2. Whether the user has scrolled to the end of content
+3. Scroll event handlers to attach to scrollable components
+4. A ref for ScrollView (when needed)
+
+## Use Cases
+
+- Show/hide UI elements based on scroll direction (e.g., navigation bars)
+- Load more content when user scrolls to the end (infinite scrolling)
+- Persist scroll position between route changes (web only)
+- Track scroll positions for analytics or user experience improvements
+
+## Basic Usage
+
+### Setup
+
+The provider should be included in your app's provider tree:
+
+```tsx
+import { ScrollDirectionProvider } from 'app/provider/scroll'
+
+function App() {
+  return (
+    <ScrollDirectionProvider>
+      {/* Your app components */}
+    </ScrollDirectionProvider>
+  )
+}
+```
+
+### Using the hook
+
+Use the `useScrollDirection` hook to access scroll information:
+
+```tsx
+import { useScrollDirection } from 'app/provider/scroll'
+
+function MyComponent() {
+  const { direction, isAtEnd, onScroll, onContentSizeChange, ref } = useScrollDirection()
+  
+  // Hide navigation when scrolling down
+  useEffect(() => {
+    if (direction === 'down') {
+      // Hide navigation
+    } else if (direction === 'up') {
+      // Show navigation
+    }
+  }, [direction])
+
+  // Load more content when reaching the end
+  useEffect(() => {
+    if (isAtEnd) {
+      loadMoreContent()
+    }
+  }, [isAtEnd])
+
+  return (
+    <ScrollView
+      ref={ref}
+      onScroll={onScroll}
+      onContentSizeChange={onContentSizeChange}
+      scrollEventThrottle={16} // Recommended for smooth tracking
+    >
+      {/* Scrollable content */}
+    </ScrollView>
+  )
+}
+```
+
+## API Reference
+
+### ScrollDirectionProvider
+
+```tsx
+<ScrollDirectionProvider>
+  {children}
+</ScrollDirectionProvider>
+```
+
+Wraps your application to provide scroll direction context.
+
+### useScrollDirection
+
+```tsx
+const { 
+  direction, 
+  isAtEnd, 
+  onScroll, 
+  onContentSizeChange, 
+  ref 
+} = useScrollDirection()
+```
+
+Returns:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `direction` | `'up'` \| `'down'` \| `null` | Current scroll direction or `null` if not scrolling |
+| `isAtEnd` | `boolean` | `true` if user has scrolled to the end of content |
+| `onScroll` | `ScrollViewProps['onScroll']` | Event handler to attach to ScrollView |
+| `onContentSizeChange` | `ScrollViewProps['onContentSizeChange']` | Event handler to attach to ScrollView |
+| `ref` | `React.RefObject<ScrollView>` | Ref to attach to ScrollView |
+
+## Platform-Specific Behavior
+
+### Web (Next.js)
+
+On web, the provider also:
+- Tracks scroll positions by route
+- Restores scroll position when navigating between routes
+- Uses Next.js router for route tracking
+
+### Native (React Native)
+
+On native, the provider:
+- Tracks current scroll direction
+- Detects when user has reached end of content
+- Does not persist scroll positions between screens (navigation handled differently)
+
+## Examples
+
+### Hiding Bottom Navigation on Scroll
+
+```tsx
+import { useScrollDirection } from 'app/provider/scroll'
+import { XStack } from 'tamagui'
+
+export const BottomNavBar = () => {
+  const { direction } = useScrollDirection()
+  
+  return (
+    <XStack
+      bottom={direction === 'down' ? -80 : 0} // Hide when scrolling down
+      animation="200ms"
+      animateOnly={['bottom']}
+      // Other styling props
+    >
+      {/* Navigation content */}
+    </XStack>
+  )
+}
+```
+
+### Infinite Scroll Implementation
+
+```tsx
+import { useScrollDirection } from 'app/provider/scroll'
+import { FlatList } from 'react-native'
+
+export const InfiniteList = ({ fetchNextPage, hasNextPage, isFetchingNextPage, data }) => {
+  const { isAtEnd } = useScrollDirection()
+  
+  useEffect(() => {
+    if (isAtEnd && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage()
+    }
+  }, [isAtEnd, hasNextPage, fetchNextPage, isFetchingNextPage])
+  
+  return (
+    <FlatList
+      data={data}
+      renderItem={({ item }) => (
+        // Render items
+      )}
+      ListFooterComponent={
+        isFetchingNextPage ? <LoadingIndicator /> : null
+      }
+    />
+  )
+}
+```
+
+## Implementation Notes
+
+- A scroll threshold (default: 50px) determines when to trigger direction changes
+- Both component dimensions and scroll offsets are tracked to determine end-of-content
+- Performance optimized with refs for frequently changing values
+- Context value is memoized to prevent unnecessary re-renders

docs/scroll-direction-provider.md

@@ -65,6 +65,7 @@
               pkgs.unstable.bun
               pkgs.unstable.tilt
               pkgs.unstable.temporal-cli
+              pkgs.unstable.ripgrep
             ] # macOS-specific tools
             ++ (pkgs.lib.optionals pkgs.stdenv.isDarwin [
               pkgs.unstable.darwin.xcode_16_3

flake.nix

@@ -1,7 +1,7 @@
 import type { ColorTokens } from '@my/ui'
 import { type IconProps, themed } from '@tamagui/helpers-icon'
 import { memo } from 'react'
-import { Defs, G, Path, Rect, Svg } from 'react-native-svg'
+import { Defs, G, Path, Rect, Svg, ClipPath } from 'react-native-svg'
 
 const Usdc = (props) => {
   const { size, color, ...rest } = props
@@ -28,9 +28,9 @@ const Usdc = (props) => {
         />
       </G>
       <Defs>
-        <clipPath id="clip0_265_2602">
+        <ClipPath id="clip0_265_2602">
           <Rect width="32" height="32" fill="white" />
-        </clipPath>
+        </ClipPath>
       </Defs>
     </Svg>
   )

packages/app/components/icons/IconUSDC.tsx

@@ -32,7 +32,7 @@ const OnboardingSchema = z.object({
 
 export const OnboardingForm = () => {
   const sendAccountCreate = api.sendAccount.create.useMutation()
-  const { user } = useUser()
+  const { user, validateToken } = useUser()
   const form = useForm<z.infer<typeof OnboardingSchema>>()
   const sendAccount = useSendAccount()
   const { replace } = useRouter()
@@ -42,8 +42,35 @@ export const OnboardingForm = () => {
 
   const [errorMessage, setErrorMessage] = useState<string>()
 
+  // Validate the token when this component mounts
+  useEffect(() => {
+    async function checkTokenValidity() {
+      // Only continue if we have what appears to be a user
+      if (!user?.id) {
+        replace('/')
+        return
+      }
+
+      // Validate token to ensure it's still valid
+      const isValid = await validateToken()
+      if (!isValid) {
+        // Token validation handles redirect in useUser
+        return
+      }
+    }
+
+    checkTokenValidity()
+  }, [user, validateToken, replace])
+
   async function createAccount({ accountName }: z.infer<typeof OnboardingSchema>) {
     try {
+      // First, validate token
+      const isTokenValid = await validateToken()
+      if (!isTokenValid) {
+        // Token validation already handles redirection
+        return
+      }
+
       assert(!!user?.id, 'No user id')
 
       // double check that the user has not already created a send account before creating a passkey
@@ -84,7 +111,27 @@ export const OnboardingForm = () => {
         })
     } catch (error) {
       console.error('Error creating account', error)
-      const message = error?.message.split('.')[0] ?? 'Unknown error'
+
+      // Check for authentication errors
+      if (error.response?.status === 401 || error.response?.status === 403) {
+        setErrorMessage('Session expired. Redirecting to sign in...')
+        setTimeout(() => {
+          replace('/')
+        }, 1500)
+        return
+      }
+
+      const message = error?.message?.split('.')[0] ?? 'Unknown error'
+
+      // Check for "No user id" which means token is invalid
+      if (message.includes('No user id')) {
+        setErrorMessage('Session expired. Redirecting to sign in...')
+        setTimeout(() => {
+          replace('/')
+        }, 1500)
+        return
+      }
+
       setErrorMessage(message)
       form.setError('accountName', { type: 'custom' })
     }
@@ -96,6 +143,7 @@ export const OnboardingForm = () => {
       replace('/') // redirect to home page if account already exists
     }
   }, [sendAccount.data?.address, replace])
+
   const renderAfterContent = useCallback(
     ({ submit }: { submit: () => void }) => (
       <>
@@ -154,6 +202,7 @@ export const OnboardingForm = () => {
     [errorMessage]
   )
 
+  // If we're not in the client, or the user isn't available, don't render
   if (!isClient) return null
 
   return (