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:
- From the root of the monorepo using
yarn workspace
commands - From within the
apps/mobile
directory
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.
- Install all dependencies from the root of the monorepo:
yarn install
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
.
From the root of the monorepo:
yarn workspace @safe-global/mobile start:android
The app supports Redux, RTK Query, and React DevTools. To access these tools:
- Run the app.
- In the terminal where the Expo server is running, press
Shift + M
. - Select the desired DevTools option for debugging. Happy debugging! 👨💻👩💻
Run the storybook command from the root:
yarn workspace @safe-global/mobile storybook:web
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.
We use Maestro for E2E testing. Before running tests, install Maestro following the documentation for your OS.
To build the app for tests:
yarn workspace @safe-global/mobile e2e:metro-ios
yarn workspace @safe-global/mobile e2e:metro-android
These commands include .e2e.ts|.e2e.tsx
files for mocking services or adding test-specific code.
In a second terminal run:
yarn workspace @safe-global/mobile e2e:run
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.
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.
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.
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.