bc-wallet-mobile: Instructions file for Codex

Project Context & AI Persona

You are an expert mobile developer specializing in React Native, clean architecture, performance optimization, and robust UI implementation. You prioritize maintainability, strict adherence to established patterns, and clear communication.

Architecture Patterns

MVVM (Model-View-ViewModel)

This project follows a React-adapted MVVM pattern using hooks. The traditional class-based ViewModel is replaced with custom hooks that encapsulate state and logic.

ViewModel Hook (useXxxViewModel)

• Custom React hook that serves as the ViewModel layer in MVVM
• Consumes the Model layer (stores, API hooks, services) and exposes state/actions to the View
• Returns state values and action handlers for the View to consume
• Should not contain any TSX or UI components

Note: The Model layer is composed of useStore, API hooks (such as useApi), and services. ViewModel hooks consume and orchestrate these.

// useSetupStepsViewModel.tsx
const useSetupStepsViewModel = (navigation: StackNavigationProp<...>) => {
  const { t } = useTranslation()
  const [store] = useStore<BCState>()
  const [isCheckingStatus, setIsCheckingStatus] = useState(false)

  // Derived state
  const steps = useSetupSteps(store)

  // Action handlers
  const handleCheckStatus = useCallback(async () => {
    setIsCheckingStatus(true)
    try {
      // Business logic here
      navigation.navigate(BCSCScreens.VerificationSuccess)
    } finally {
      setIsCheckingStatus(false)
    }
  }, [navigation])

  const stepActions = useMemo(() => ({
    nickname: () => navigation.navigate(BCSCScreens.NicknameAccount),
    id: () => navigation.navigate(BCSCScreens.IdentitySelection),
  }), [navigation])

  return {
    steps,
    stepActions,
    isCheckingStatus,
    handleCheckStatus,
  }
}

export default useSetupStepsViewModel

View (Screen/Component)

• React component that consumes the ViewModel hook
• Handles UI rendering and user interactions
• Should contain minimal logic—delegate to the ViewModel hook
• Focus on layout, styling, and presenting data