Git Product home page Git Product logo

oasisprotocol / oasis-wallet-web Goto Github PK

View Code? Open in Web Editor NEW
110.0 29.0 40.0 25.4 MB

Official non-custodial web wallet for the Oasis Network.

Home Page: https://wallet.oasis.io

License: Apache License 2.0

JavaScript 2.99% TypeScript 95.74% Dockerfile 0.15% HTML 0.19% CSS 0.26% Jinja 0.11% Java 0.14% Swift 0.33% Ruby 0.08%
oasis wallet blockchain crypto delegation staking non-custodial official ledger web rose react

oasis-wallet-web's Introduction

ROSE Wallet

CI build status CI test status CI lint status Release status License codecov Renovate enabled

โš ๏ธ NEVER use the private keys and mnemonics given as examples in this repository.

demo.webm.mp4

Deploys

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.

Architecture diagram

  • 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

oasis-wallet-web's People

Contributors

alexander-elgin avatar alexey-milovidov avatar batuhantastekin avatar buberdds avatar csillag avatar dependabot[bot] avatar ennsharma avatar esya avatar fossabot avatar lubej avatar lukaw3d avatar matevz avatar memoriesadrift avatar mitjat avatar peterjgilbert avatar pro-wh avatar renovate-bot avatar renovate[bot] avatar semantic-release-bot avatar tjanez avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

oasis-wallet-web's Issues

Scrolling issue on mobile

Two distinct scroll movements are required on mobile to reach the bottom of the page for an unknown reason.

Transaction history shows wrong amount for Reclaim escrow transaction

This is what Reclaim escrow transaction preview shows:
Undelegate Txn confirmation

(Note that the 10,000.0 TEST amount is wrong since the value of shares increased in between when the share amount was approximated from the desired reclaim value of 10k, to the actual transaction submission.)

This is what transaction history shows:
Reclaim txn in transaction history - wrong amount

This is what is shown under "Debonding delegations" tab:
Debonding delegations

Enhancements to transaction history

Send transaction:
Txn history - 1 - Send

Delegate transaction:
Txn history - 2 - Delegate

  • I would suggest renaming the title to:
    • "Delegated 99,999.0 TEST"
  • I would suggest renaming "Validator" to "To" and showing a validator's name instead of account address if the address is for a known validator with an entity in metadata registry. The validator's name could be a link to a page with more info about it (link to block explorer?) or to go under "Active delegation" tabs for that validator?
  • Should the validator's avator also be shown somewhere?

Undelegate transaction:
Txn history - 3 - Undelegate

  • Same suggestions as for the Delegate transaction.

Enhancements to Preview transaction

Delegate Txn confirmation

I have the following suggestions:

  1. Type. Should the "nice" transaction type / name (something that is translatable) be shown first and the raw transaction's method name (e.g. Add escrow) be shown in parenthesis?
    Something like:

    • Type: Delegate (Add escrow)

    The full description (e.g. "Delegate your tokens to a validator and earn rewards") could be shown via a mouse-hoover tooltip?

  2. Validator. Can this be renamed to "To"? In principle, one could make a delegation to a non-validator node. And this makes it consistent with the Oasis Node CLI which shows:

You are about to sign the following transaction:
  Method: staking.AddEscrow
  Body:
    To:     oasis1qqyrlc85h0mz4g00gj7r8pmxsas9yqc4nupaxy4a
    Amount: 20000.0 TEST
  Nonce:  0
  Fee:
    Amount: 0.0 TEST
    Gas limit: 272
    (gas price: 0.0 ROSE per gas unit)
Other info:
  Genesis document's hash: 425f8b31b5d511483c401fb480457c183c0eca7e78b8a6ed4ce88be6cfa9ab14

And with what the Oasis Ledger app will show in the upcoming version.

  1. Balance. Do you think users will find this field useful? In principle, the Preview transaction is a dialog, so the Total balance of an account will be visible in the background. Moreover, I was a bit confused if the balance should be interpreted as the balance before executing this transaction or some "preview" balance that will be the effect of executing this transaction?
    I would consider removing it.

  2. Gas. Can you rename this to "Gas limit" and change the units to so it is shown as 272? This will make it consistent with the Oasis Node CLI and what the Oasis Ledger app shows.

Use fully namespaced image names in Docker / Docker Compose

On systems like Fedora, the default Docker container registry is not docker.io but registry.fedoraproject.org.

Could you make image names in Docker / Docker Compose configurations fully namespaced (e.g. docker.io/library/golang:1.16 instead of golang:1.16) so their is no ambiguity about which image is required?

Unused dependencies

These dependencies don't seem to be used:

  • bip32
  • bn.js
  • @types/bn.js
  • buffer
  • cborg
  • combinate
  • elliptic
  • grpc-web
  • js-sha256
  • js-sha512
  • polished
  • postinstall-postinstall
  • react-number-format

2021-07 audit: top-level issue

please mark all issues found during this audit as blocking this one. this issue will not be marked as complete until all blockers are resolved (fixed or deferred, etc).

Support staking

  • Staking (Adding / reclaiming escrow)
  • Staking rewards and history
  • Current debonding

Wrong balance when trying to stake, switching between testnet and mainnet

It seems that balance sometimes gets out of sync between Testnet and Mainnet.

switch to testnet switch to mainnet
input validation says I don't have 111 TEST transaction summary says I have 10000 ROSE
found balance = 0n in assertSufficientBalance with debugger
image image

Display of shares

For example, when a user wants to reclaim (a part of) his delegation, he is also shown the corresponding amount of shares:
Reclaim delegation

The amount that is presented in actually displayed in gigashares. The actual amount of shares in this case is 9997790262966873 and shares themselves are indivisible.

I agree that displaying the raw amount of shares would be even less clear to the user, so it is better to display it in gigashares. Just make sure to to suffix the amount with the unit. We would prefer using "gigashares".

FWIW, this is a design we have in mind for the next version of the oasis-node stake account info CLI command:

Balance:
  Total: 38,011,517.084506708 ROSE
  Available: 5,105,018.191459385 ROSE
  Active Delegations from this Account:
    Total: 32,906,498.893047323 ROSE
    Delegations:
      - Address: oasis1qrw82ag2sypeytse9x9k4uxym53l5lc5jyfs2sxv (self)
        Amount:  176,207.030432434 ROSE (169,146.962340923 gigashares, 0.56%)
      - Address: oasis1qrdx0n7lgheek24t24vejdks9uqmfldtmgdv7jzz
        Amount:  32,730,291.862614889 ROSE (31,418,889.047306104 gigashares, 76.34%)
  Debonding Delegations from this Account:
    Total: 0.0 ROSE

Nonce: 5
 
Active Delegations to this Account:
  Total: 31,407,044.571716172 ROSE (30,148,661.90284496 gigashares)
  Delegations:
    - Address: oasis1qrw82ag2sypeytse9x9k4uxym53l5lc5jyfs2sxv (self)
      Amount:  176,207.030432434 ROSE (169,146.962340923 gigashares, 0.56%)
    - Address: oasis1qq2xx4pgk0wa73363l287wy48lmaf3v8tymthyhv
      Amount:  20,814,851.680934195 ROSE (19,980,865.262676913 gigashares, 66.27%)
    - Address: oasis1qrn9c0k92vk5leh62m942nqeq2kl9tmkaqk6lzz4
      Amount:  10,415,485.860349543 ROSE (9,998,169.711273221 gigashares, 33.16%)
    - Address: oasis1qqzt9qamqdl2kau4avryz6pp2nq8rgxmzysz2492
      Amount:  500.0 ROSE (479.966553905 gigashares, <0.01%)

Http response at 400 or 500 level

i run the code in develop , and change nothing . but show this error

Http response at 400 or 500 level
The above error occurred in task selectNetwork
created by takeEvery(network/selectNetwork, selectNetwork)
created by networkSaga
Tasks cancelled due to error:
takeEvery(network/selectNetwork, selectNetwork)

defense-in-depth: data validation: bech32

just a nit noticed while doing #181 auditing -- not obvious whether it has security impact in practice.

we use bech32 w/ oasis prefix, but isValidAddress

export const isValidAddress = (addr: string) => {
or assertValidAddress
function assertValidAddress(address: string) {
does not guard
export const PrettyAddress = memo((props: Props) => {
so it's not obvious that there is no way to introduce malformed bech32 addresses, e.g., oasis1...1foo and oasis1...1bar, where the ... are identical and valid bech32 characters, would be displayed sans the malformed suffix by PrettyAddress and are visually identical and confusing. it seems likely that eventually malformed addresses would be caught, but it's not obvious that it will always be caught.

it would be better defense-in-depth if even UI code like PrettyAddress validated its preconditions about its arguments and threw an exception (which i think bech32.decode does), even though for error reporting / blame assignment the same check should be done as close to the source of the data as possible, so that the check in PrettyAddress is unreachable in normal execution.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

docker-compose
docker-compose-testnet.yml
  • docker.io/envoyproxy/envoy v1.21.3
  • docker.io/library/postgres 16.0-alpine
  • docker.io/clickhouse/clickhouse-server 23.1.3-alpine
docker-compose.yml
  • docker.io/envoyproxy/envoy v1.21.3
  • docker.io/library/postgres 16.0-alpine
  • docker.io/clickhouse/clickhouse-server 23.1.3-alpine
dockerfile
docker/oasis-explorer/Dockerfile
  • docker.io/library/golang 1.20
  • docker.io/library/alpine 3.17.1
docker/oasis-node/Dockerfile
github-actions
.github/workflows/ci-build.yml
  • actions/checkout v4
  • actions/setup-node v3
.github/workflows/ci-lint.yml
  • actions/checkout v4
  • actions/setup-python v4
  • actions/setup-node v3
.github/workflows/ci-test.yml
  • actions/checkout v4
  • actions/setup-node v3
  • actions/checkout v4
  • actions/setup-node v3
  • actions/upload-artifact v3
  • actions/checkout v4
  • actions/setup-node v3
  • actions/upload-artifact v3
  • actions/checkout v4
  • actions/setup-node v3
  • satackey/action-docker-layer-caching v0.0.11
  • actions/upload-artifact v3
  • actions/checkout v4
  • actions/download-artifact v3
  • codecov/codecov-action v3
  • codecov/codecov-action v3
.github/workflows/dump-validators.yml
  • actions/checkout v4
  • peter-evans/create-pull-request v5
npm
package.json
  • @ethereumjs/util 9.0.0
  • @ledgerhq/hw-transport-webusb 6.27.19
  • @metamask/jazzicon 2.0.0
  • @oasisprotocol/client 0.1.1-alpha.2
  • @oasisprotocol/client-rt 0.2.1-alpha.2
  • @oasisprotocol/ledger 1.0.0
  • @reduxjs/toolkit 1.9.7
  • base64-arraybuffer 1.0.2
  • bech32 2.0.0
  • bignumber.js 9.1.1
  • bip39 3.1.0
  • body-scroll-lock 4.0.0-beta.0
  • copy-to-clipboard 3.3.3
  • grommet 2.33.2
  • grommet-icons 4.11.0
  • i18next 23.5.1
  • i18next-browser-languagedetector 7.1.0
  • lodash 4.17.21
  • qrcode.react 3.1.0
  • react 18.2.0
  • react-app-polyfill 3.0.0
  • react-data-table-component 6.11.8
  • react-dom 18.2.0
  • react-helmet-async 1.3.0
  • react-i18next 13.3.0
  • react-redux 7.2.9
  • react-router-dom 6.16.0
  • redux-saga 1.2.3
  • redux-state-sync 3.1.4
  • styled-components 5.3.11
  • tweetnacl 1.0.3
  • typed-redux-saga 1.5.0
  • valid-url 1.0.9
  • webext-redux 2.1.9
  • webextension-polyfill 0.10.0
  • @cypress/code-coverage 3.12.4
  • @parcel/config-webextension 2.9.3
  • @parcel/packager-raw-url 2.9.3
  • @parcel/transformer-webmanifest 2.9.3
  • @testing-library/cypress 10.0.1
  • @testing-library/jest-dom 6.1.4
  • @testing-library/react 13.4.0
  • @testing-library/user-event 14.5.1
  • @types/body-scroll-lock 3.1.1
  • @types/connect 3.4.37
  • @types/jest 29.5.5
  • @types/jest-when 3.5.3
  • @types/lodash 4.14.199
  • @types/react 17.0.66
  • @types/react-dom 18.2.8
  • @types/react-redux 7.1.27
  • @types/react-test-renderer 18.0.3
  • @types/redux-state-sync 3.1.7
  • @types/styled-components 5.1.28
  • @types/testing-library__jest-dom 5.14.9
  • @types/valid-url 1.0.5
  • @types/w3c-web-usb 1.0.8
  • @types/webextension-polyfill 0.10.4
  • @typescript-eslint/eslint-plugin 6.8.0
  • @typescript-eslint/parser 6.8.0
  • babel-plugin-istanbul 6.1.1
  • cypress 13.3.1
  • eslint 8.51.0
  • eslint-config-prettier 9.0.0
  • eslint-config-react-app 7.0.1
  • eslint-plugin-prettier 5.0.1
  • eslint-plugin-react 7.33.2
  • eslint-plugin-react-hooks 4.6.0
  • eslint-plugin-react-refresh 0.4.3
  • i18next-scanner 4.4.0
  • i18next-scanner-typescript 1.1.1
  • jest 29.7.0
  • jest-environment-jsdom 29.7.0
  • jest-styled-components 7.2.0
  • jest-when 3.6.0
  • markdownlint-cli 0.37.0
  • parcel 2.9.3
  • parcel-transformer-env-variables-injection 0.1.2
  • prettier 3.0.3
  • process 0.11.10
  • react-test-renderer 18.2.0
  • redux-saga-test-plan 4.0.6
  • sanitize.css 13.0.0
  • serve-handler 6.1.5
  • stream-browserify 3.0.0
  • string_decoder 1.3.0
  • stylelint 15.11.0
  • stylelint-config-recommended 13.0.0
  • ts-jest 29.1.1
  • typescript 5.2.2
  • util 0.12.5
  • wait-on 7.0.1
  • @ledgerhq/hw-transport ^6.27.6
  • @testing-library/dom 9.3.3
  • @typescript-eslint/eslint-plugin 6.8.0
  • bip39 3.1.0
  • eslint-plugin-react 7.33.2
  • grommet-icons 4.11.0
  • typescript 5.2.2
  • protobufjs 7.2.5
playwright/package.json
  • @playwright/test 1.39.0

  • Check this box to trigger a request for Renovate to run again on this repository

Multiple accounts

Support having multiple addresses open at the same time and switching between those, with different wallet types concurrently

Use rel="noopener" on target="_blank" links

I don't think this is high priority
Blocked by grommet/grommet#5537
Related to #181

For security of older browsers it is best practice to use target="_blank" with rel="noopener"
https://web.dev/external-anchors-use-rel-noopener/

This appears in ValidatorMediaInfo:

<Button href={props.href} icon={props.icon} hoverIndicator size="small" target="_blank" />

Validator information allows XSS through URLs

If validator has a website link validator.media.website_link = 'javascript:alert(1)' it executes when user middle-clicks the website link

Minimal code to reproduce:

<ValidatorMediaInfo mediaInfo={ { website_link: 'javascript:alert(1)' } } />

Blocking #181

Support ledger

Support opening wallets with ledger (with various accounts in the derivation paths), and signing transactions with ledger

Account switching issue - wrong account's details are displayed

Steps to reproduce:

  • Open two different accounts (I used 2 different mnemonics).
  • Switch between them with the account switcher button in the top-right corner.
  • Account details are not updated and after switching, the wrong account's details are displayed.

Example screenshot (the chosen account is oasis1qrs594jx6ytzgqp92uxqlr8n5qdcrpemv5xg4wn4 but they one displayed is oasis1qqdcs4gj5g0kykdcy9s32snh8a58swgkhyj6kzdy):
Account switching issue - wrong account details are displayed

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.