ChauyiufaiJack / oasis-wallet-web

The official non-custodial web wallet for the Oasis Network.

Oasis Wallet

⚠️ NEVER use the private keys and mnemonics given as example in this repository.

• Oasis Wallet
  • Features
    • Additional features coming soon
  • Getting started
    • Installing and running oasis-wallet
    • Test accounts
  • Architecture
  • Contributing & development
    • Running the tests
    • Code style
    • Internationalization
  • License

Deploys

• Production: https://wallet.oasisprotocol.org
• Staging: https://wallet.stg.oasisprotocol.org

Features

• Opening wallets through private key or mnemonic
• Transaction history, currently all transactions are listed. We need to submit a pull-request to oasis-explorer to support pagination
• 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 oasis-wallet

You can quickly get started with the following commands:

yarn install
REACT_APP_BYPASS_LOCAL=1 yarn start

Alternatively, to get started with a local network:

docker-compose up --build -d
yarn install
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

Oasis-wallet needs multiple components to run, all provided in the docker-compose file 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 transasctions.

• oasis-monitor, a block indexer to store historical data about transactions, accounts, validators, rewards, blocks and more. It exposes an OpenAPI. Oasis Monitor dashboard is available at https://oasismonitor.com. 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. Oasis scan dashboard is available at https://www.oasisscan.com.

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, ran with Cypress, located in cypress/. These tests require the react app to be started on accessible on port 3000 and the docker-compose stack to be up.
• Unit & functional tests, ran with Jest, located throughout the codebase

To run all tests:

# Run jest tests
yarn test

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

# Manually check that content-security-policy in ./internals/getCsp.js doesn't break any functionality
yarn --silent print-csp
yarn start:prod
# Open http://localhost:5000/account/oasis1qq3xrq0urs8qcffhvmhfhz4p0mu7ewc8rscnlwxe/stake and switch to testnet.
# This exercises at least: fonts, grpc, testnet grpc, monitor, 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

We have Transifex to easily contribute translations.

Oasis-wallet uses react-i18next for I18n. You can simply use the useTranslation hook inside your components to add additional i18n-ready strings. You can then export the new keys to the translation files by running

yarn run extract-messages

To add a new language, edit src/locales/i18n.ts and i18next-scanner.config.js, then run the command above once more.

License