Home

Awesome

<img src="/public/images/logo.svg" height="60" valign="middle" alt="Safe{Wallet}" style="background: #fff; padding: 20px; margin: 0 -20px" />

License Tests GitHub package.json version (branch) GitPOAP Badge

Safe{Wallet} is a smart contract wallet for Ethereum and other EVM chains. Based on Gnosis Safe multisig contracts.

This repository is the frontend of the Safe{Wallet} app.

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 environment variables:

Env variableDescription
NEXT_PUBLIC_INFURA_TOKENInfura RPC API token
NEXT_PUBLIC_SAFE_APPS_INFURA_TOKENInfura token for Safe Apps, falls back to NEXT_PUBLIC_INFURA_TOKEN
NEXT_PUBLIC_IS_PRODUCTIONSet to true to build a minified production app
NEXT_PUBLIC_GATEWAY_URL_PRODUCTIONThe base URL for the Safe Client Gateway
NEXT_PUBLIC_GATEWAY_URL_STAGINGThe base CGW URL on staging
NEXT_PUBLIC_SAFE_VERSIONThe latest version of the Safe contract, defaults to 1.4.1
NEXT_PUBLIC_WC_PROJECT_IDWalletConnect v2 project ID
NEXT_PUBLIC_TENDERLY_ORG_NAMETenderly org name for Transaction Simulation
NEXT_PUBLIC_TENDERLY_PROJECT_NAMETenderly project name
NEXT_PUBLIC_TENDERLY_SIMULATE_ENDPOINT_URLTenderly simulation URL
NEXT_PUBLIC_BEAMER_IDBeamer is a news feed for in-app announcements
NEXT_PUBLIC_GOOGLE_TAG_MANAGER_IDGTM project id
NEXT_PUBLIC_GOOGLE_TAG_MANAGER_DEVELOPMENT_AUTHDev GTM key
NEXT_PUBLIC_GOOGLE_TAG_MANAGER_LATEST_AUTHPreview GTM key
NEXT_PUBLIC_GOOGLE_TAG_MANAGER_LIVE_AUTHProduction GTM key
NEXT_PUBLIC_SENTRY_DSNSentry id for tracking runtime errors
NEXT_PUBLIC_IS_OFFICIAL_HOSTWhether 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_APIRedefine API base URL
NEXT_PUBLIC_FIREBASE_OPTIONS_PRODUCTIONFirebase Cloud Messaging (FCM) initializeApp options on production
NEXT_PUBLIC_FIREBASE_VAPID_KEY_PRODUCTIONFCM vapid key on production
NEXT_PUBLIC_FIREBASE_OPTIONS_STAGINGFCM initializeApp options on staging
NEXT_PUBLIC_FIREBASE_VAPID_KEY_STAGINGFCM vapid key on staging
NEXT_PUBLIC_SPINDL_SDK_KEYSpindl SDK key

If you don't provide some of the variables, the corresponding features will be disabled in the UI.

Running the app locally

Install the dependencies:

yarn

Generate types:

yarn postinstall

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 a static site:

yarn build

Serve the static files:

yarn serve

Launch the Cypress UI:

yarn cypress:open

You can then choose which e2e tests to run. Some tests will require signer private keys, please include them in your .env file

Component template

To create a new component from a template:

yarn cmp MyNewComponent

Pre-push hooks

This repo has a pre-push hook that runs the linter (always) and the tests (if the RUN_TESTS_ON_PUSH env variable is set to true) before pushing. If you want to skip the hooks, you can use the --no-verify flag.

Frameworks

This app is built using the following frameworks: