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 |

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