The default Safe web interface.
Contributing
Contributions, be it a bug report or a pull request, are very welcome. Please check our contribution guidelines beforehand.
Getting started with local development
Environment variables
Create a .env file with environment variables. You can use the .env.example file as a reference.
Here's the list of all the required and optional variables:
| Env variable | Description | |
|---|---|---|
NEXT_PUBLIC_INFURA_TOKEN |
required | Infura RPC API token |
NEXT_PUBLIC_SAFE_APPS_INFURA_TOKEN |
optional | Infura token for Safe Apps, falls back to NEXT_PUBLIC_INFURA_TOKEN |
NEXT_PUBLIC_IS_PRODUCTION |
optional | Set to true to build a minified production app |
NEXT_PUBLIC_GATEWAY_URL_PRODUCTION |
optional | The base URL for the Safe Client Gateway |
NEXT_PUBLIC_GATEWAY_URL_STAGING |
optional | The base CGW URL on staging |
NEXT_PUBLIC_SAFE_VERSION |
optional | The latest version of the Safe contract, defaults to 1.3.0 |
NEXT_PUBLIC_WC_BRIDGE |
optional | WalletConnect v1 bridge URL, falls back to the public WC bridge |
NEXT_PUBLIC_WC_PROJECT_ID |
optional | WalletConnect v2 project ID |
NEXT_PUBLIC_TENDERLY_ORG_NAME |
optional | Tenderly org name for Transaction Simulation |
NEXT_PUBLIC_TENDERLY_PROJECT_NAME |
optional | Tenderly project name |
NEXT_PUBLIC_TENDERLY_SIMULATE_ENDPOINT_URL |
optional | Tenderly simulation URL |
NEXT_PUBLIC_BEAMER_ID |
optional | Beamer is a news feed for in-app announcements |
NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID |
optional | GTM project id |
NEXT_PUBLIC_GOOGLE_TAG_MANAGER_DEVELOPMENT_AUTH |
optional | Dev GTM key |
NEXT_PUBLIC_GOOGLE_TAG_MANAGER_LATEST_AUTH |
optional | Preview GTM key |
NEXT_PUBLIC_GOOGLE_TAG_MANAGER_LIVE_AUTH |
optional | Production GTM key |
NEXT_PUBLIC_SENTRY_DSN |
optional | Sentry id for tracking runtime errors |
NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_PRODUCTION |
optional | Safe Gelato Relay Service URL to allow relaying transactions via Gelato |
NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_STAGING |
optional | Relay URL on staging |
NEXT_PUBLIC_IS_OFFICIAL_HOST |
optional | Whether it's the official distribution of the app, or a fork; has legal implications. Set to true only if you also update the legal pages like Imprint and Terms of use |
NEXT_PUBLIC_REDEFINE_API |
optional | Redefine API base URL |
If you don't provide some of the optional vars, the corresponding features will be disabled in the UI.
Running the app locally
Install the dependencies:
yarnRun the development server:
yarn startOpen http://localhost:3000 with your browser to see the app.
Lint
ESLint:
yarn lint --fix
Prettier:
yarn prettier
Tests
Unit tests:
yarn test --watch
Cypress tests
Build and generarate a static site:
yarn build && yarn export
Serve the static files:
yarn serve
Launch the Cypress UI:
yarn cypress:open
You can then choose which e2e tests to run.
Component template
To create a new component from a template:
yarn cmp MyNewComponent
Frameworks
This app is built using the following frameworks:
- Safe Core SDK
- Safe Gateway SDK
- Next.js
- React
- Redux
- MUI
- ethers.js
- web3-onboard