Quick Start Dev Environment Setup

This guide will help you set up your development environment for Freighter Mobile.

Prerequisites

1. Node.js & Yarn:

   • Install Node.js (LTS version recommended). You can download it from nodejs.org.
   • Yarn is the recommended package manager. Install it via npm (which comes with Node.js):

       npm install --global yarn

2. Watchman (macOS only):

   • Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended for performance.

     brew install watchman

3. React Native CLI:

   • Install the React Native command line interface:

     npm install --global react-native-cli

   • Alternatively, you might prefer to use npx react-native <command> for running commands without a global installation.

Platform Specific Setup

Follow the official React Native documentation for setting up your environment for iOS and Android development. This includes installing Xcode (for iOS) and Android Studio (for Android), along with their respective SDKs and command-line tools.

• Go to the React Native development environment setup page.
• Select "React Native CLI Quickstart".
• Follow the instructions for your development OS (macOS, Windows, Linux) and target OS (iOS, Android).

Project Setup

1. Clone the Repository:

   git clone https://github.com/stellar/freighter-mobile.git
   cd freighter-mobile

2. Install Dependencies:

   yarn install

3. Environment Variables:

   The project uses react-native-config for environment variables. You'll need to set up your environment variables before running the app:

   1. Create a .env file in the project root:

      touch .env

   2. Add the required environment variables:

      FREIGHTER_BACKEND_V1_PROD_URL=your_backend_v1_prod_url_here
      FREIGHTER_BACKEND_V2_PROD_URL=your_backend_v2_prod_url_here
      
      WALLET_KIT_PROJECT_ID_PROD=your_prod_project_id_here
      other variables...
      

   3. Update the .env.example file for documentation, add the same variables without values:

      FREIGHTER_BACKEND_V1_PROD_URL=
      FREIGHTER_BACKEND_V2_PROD_URL=
      
      WALLET_KIT_PROJECT_ID_PROD=
      other variables...
      

   Important:

   • Never commit the .env file to version control
   • Keep .env.example updated with any new environment variables
   • If you don't have the required environment variables, ask a team member for the values

Important

See package.json for other useful scripts like more specific clean/install commands.

Running the App

The app supports two different bundle IDs for different environments:

• Production: org.stellar.freighterwallet (default)
• Development: org.stellar.freighterdev

Run on Android:

• Development variant:

  yarn android
  or
  yarn android-dev

• Production variant:

  yarn android-prod

Run on iOS (macOS only):

• Development variant:

  yarn ios
  or
  yarn ios-dev

• Production variant:

  yarn ios-prod

Important

• The Metro bundler should automatically launch in a separate terminal window while running the yarn ios or yarn android scripts. You can also launch Metro manually through the yarn start command if needed
• If you don't have an iOS simulator or Android emulator booted it will try to boot the most recent one available while running the yarn ios or yarn android scripts
• The development variant will have "Dev" in the app name to distinguish it from production

This should get you up and running with the Freighter Mobile app in your development environment. If you encounter any issues, please refer to the React Native documentation or open an issue in the repository.

WalletConnect Mock dApp for Manual Testing

The mock-dapp server allows you to manually test WalletConnect features like stellar_signMessage and stellar_signXDR without needing a full dApp. This is useful for both automated e2e tests and manual testing during development.

Setup

1. Navigate to mock-dapp directory:

   cd mock-dapp

2. Install dependencies:

   npm install

3. Configure environment variables:

   Create a .env file in the mock-dapp directory:

   cp .env.example .env

   Add your WalletConnect project ID:

   WALLET_KIT_PROJECT_ID=your_project_id_here
   PORT=3001
   

4. Start the server:

   npm start

   Or use the provided script from the e2e directory:

   ./e2e/scripts/start-mock-server.sh

The server will run on http://localhost:3001 and provide endpoints for:

• Creating WalletConnect sessions
• Sending sign message requests
• Sending sign transaction requests
• Viewing session responses

For more details, see the mock-dapp README.

To stop the server:

./e2e/scripts/stop-mock-server.sh