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 bridge URL, falls back to the public WC bridge
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

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:

yarn

Run the development server:

yarn start

Open 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