Skip to content

Latest commit

 

History

History
185 lines (116 loc) · 4.37 KB

README.md

File metadata and controls

185 lines (116 loc) · 4.37 KB

Safe{Mobile} app 📱

This project is now part of the @safe-global/safe-wallet monorepo! The monorepo setup allows centralized management of multiple applications and shared libraries. This workspace (apps/mobile) contains the Safe Mobile App.

You can run commands for this workspace in two ways:

  1. From the root of the monorepo using yarn workspace commands
  2. From within the apps/mobile directory

Prerequisites

In the addition to the monorepo prerequisites, the mobile app requires the following:

  • Expo CLI
  • iOS/Android Development Tools
  • Maestro if you want to run E2E tests

You can follow the expo documentation to install the CLI and set up your development environment.

Follow the Maestro documentation to install the tool for E2E testing.

Setup the project

  1. Install all dependencies from the root of the monorepo:
yarn install

Running the app

There is a .env.example file in the root of the mobile app. Create a .env.local file and paste the contents of the .env.example file into it and set the correct values for the environment variables.

For local development you need to place the google-services.json and GoogleService-Info.plist files in the root of the mobile app.

If you use EAS to manage your environement variables you can issue the

eas env:pull

command. This will pull the variables from your eas project and place them in the .env.local file.

Running on iOS

From the root of the monorepo:

yarn workspace @safe-global/mobile start:ios

Or directly from the apps/mobile directory:

yarn start:ios

Note

From now on for brevity we will only show the command to run from the root of the monorepo. You can always run the command from the apps/mobile directory you just need to omit the workspace @safe-global/mobile.

Running on Android

From the root of the monorepo:

yarn workspace @safe-global/mobile start:android

How to open the custom devtools menu

The app supports Redux, RTK Query, and React DevTools. To access these tools:

  1. Run the app.
  2. In the terminal where the Expo server is running, press Shift + M.
  3. Select the desired DevTools option for debugging. Happy debugging! 👨‍💻👩‍💻

Running the Storybook

Running in the browser

Run the storybook command from the root:

yarn workspace @safe-global/mobile storybook:web

Running on a mobile device

To run the storybook on a mobile device:

yarn workspace @safe-global/mobile storybook:[ios|android]

To View stories press i on iOS or a on Android.

How to run the E2E Tests

We use Maestro for E2E testing. Before running tests, install Maestro following the documentation for your OS.

Run a dev build and E2E tests

To build the app for tests:

For iOS:

yarn workspace @safe-global/mobile e2e:metro-ios

For Android:

yarn workspace @safe-global/mobile e2e:metro-android

These commands include .e2e.ts|.e2e.tsx files for mocking services or adding test-specific code.

Run the tests

In a second terminal run:

yarn workspace @safe-global/mobile e2e:run

Use Maestro Studio to write tests

To write tests with Maestro Studio, run:

maestro studio

Export the generated YAML file to the e2e folder and include it in the test suite.

Running E2E tests in CI

To run tests in CI, add the eas-build-ios:build-and-maestro-test label to a PR. This triggers the Expo CI pipeline to execute the tests.

Unit tests

We use Jest and the React Native Testing Library for unit, component, and hook tests.

Run tests:

yarn workspace @safe-global/mobile test

Run in watch mode:

yarn workspace @safe-global/mobile test:watch

Check coverage:

yarn workspace @safe-global/mobile test

Navigate to the coverage folder and open index.html in your browser.

Running ESLint & Prettier

This project uses ESLint, Prettier, and TypeScript for linting and formatting.

Run linting from the root:

yarn workspace @safe-global/mobile lint

This command validates files with TypeScript, ESLint, and Prettier configurations.