ROSE Wallet

:warning: NEVER use the private keys and mnemonics given as examples in this repository.

demo-video

• ROSE Wallet
  • Features
  • Getting started
    • Installing and running from source code
    • Test accounts
  • Architecture
  • Contributing & development
    • Running the tests
    • Code style
    • Internationalization

Deploys

• stable branch: https://wallet.oasis.io
• master branch: https://wallet.stg.oasis.io

Features

• Opening wallets through private key or mnemonic
• Transaction history, currently all transactions are listed
• Multiple languages (English and French currently supported)
• Submitting transactions
• Ledger support
• Multiple accounts open in parallel
• Staking (Adding / reclaiming escrow)

Getting started

Installing and running from source code

You can quickly get started with the following commands:

yarn install
yarn start

Alternatively, to get started with a local network:

docker-compose up --build -d
yarn install
REACT_APP_LOCALNET=1 yarn start

Then go to http://localhost:3000 to access the wallet.

Test accounts

The local single-node network used for development comes built-in with two accounts already having tokens.

Using a private key:
X0jlpvskP1q8E6rHxWRJr7yTvpCuOPEKBGW8gtuVTxfnViTI0s2fBizgMxNzo75Q7w7MxdJXtOLeqDoFUGxxMg==
oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk

Using a mnemonic:
abuse gown claw final toddler wedding sister parade useful typical spatial skate
decrease bulk student manual cloth shove fat car little swamp tag ginger
oasis1qq5t7f2gecsjsdxmp5zxtwgck6pzpjmkvc657z6l

Architecture

This code needs multiple components to run, all provided in the docker-compose.yml for local development.

• envoy-proxy, used as a gRPC gateway for live access to the oasis-node, to fetch live balance, information about the current state of the network, and to submit transactions.

• oasis-monitor, a block indexer to store historical data about transactions, accounts, validators, rewards, blocks and more. It exposes an OpenAPI. oasis-monitor requires two databases:

  • A PostgreSQL instance to keep track of it's import batches
  • A Clickhouse server to store the indexed data

• oasis-scan, oasis blockchain explorer that enables view of historical data about transactions, accounts, validators, paratimes, blocks, proposals and more. It exposes an API.

API that web wallet is using is determined during a build time.

Contributing & development

Running the tests

The repository has two different test strategies:

• E2E (End-to-end) tests, run with Cypress, located in cypress/. These tests require the react app to be accessible on port 3000 and the docker-compose stack to be up.
• Unit & functional tests, run with Jest, located throughout the codebase

To run all tests:

# Check typescript errors
yarn checkTs

# Run jest tests
yarn test

# Run playwright tests
yarn start
(cd playwright; yarn; npx playwright install --with-deps)
(cd playwright; yarn test)
# Or `yarn start:prod` and `yarn test:prod` to test production builds.
# Or `xvfb-run yarn test` to prevent browser windows opening.

# Run cypress tests
docker-compose up -d
# Run this in another terminal to keep it open
REACT_APP_LOCALNET=1 REACT_APP_BACKEND=oasismonitor yarn start
yarn cypress:run

# Manually check that content-security-policy in getSecurityHeaders.js doesn't
# break any functionality
yarn start:prod
# Open http://localhost:5000/account/oasis1qq3xrq0urs8qcffhvmhfhz4p0mu7ewc8rscnlwxe/stake
# and switch to testnet. This exercises at least: fonts, grpc, testnet grpc, API,
# and validator logos.

Code style

This repository uses prettier as a code formatter and eslint as it's linter. You can use the following commands:

# Lint the whole repository
yarn lint

# Fix linting issues
yarn lint:fix

Git Commit Messages

A quick summary:

• Separate subject from body with a blank line.
• Limit the subject line to 72 characters.
• Capitalize the subject line.
• Do not end the subject line with a period.
• Use the present tense ("Add feature" not "Added feature").
• Use the imperative mood ("Move component to..." not "Moves component to...").
• Wrap the body at 80 characters.
• Use the body to explain what and why vs. how.

A detailed post on Git commit messages: How To Write a Git Commit Message.

Internationalization

Translating: We have Transifex to easily contribute translations.

Development: ROSE Wallet uses react-i18next for internationalization. You can simply use the useTranslation hook inside your components to add additional translation-ready strings. You can then export the new keys to the English translation.json by running yarn run extract-messages.

Updating from Transifex: English translation.json is set as an automatically updating resource in Transifex, so the new translation strings will appear in Transifex a few hours after changes are merged. After they are translated:

1. click "Download file to translate" on the target languages,
2. yarn run extract-messages, and
3. create a new pull request titled "i18n: Update translations from Transifex".

Adding a new language:

1. first add it to Transifex and translate the strings,
2. create a folder with the new language code in src/locales and download the translation file there,
3. add the new language to the list of resources

Preparing a Release

Release process doc