emurgo/yoroi-frontend

Yoroi Wallet - Cardano ADA Wallet - Your gateway to the financial world (extension frontend)

Yoroi - Cardano ADA wallet

Download

Firefox	Chrome	Edge

Looking for Yoroi Mobile? See here

Contributing

Check out our documents on the governance of this project.

First-time setup

This is a multi-project Github repository. You can find the different projects in the packages folder.

Although each project has its own setup steps, steps, there are also setup steps for this repository as a whole.

If you have nvm, just run

nvm use

If you don't have nvm you can download node manually from here but you need to be careful the version matches the one specified in our .nvmrc file.

Next, install project-independent dependencies with

npm install

LICENSE

MIT

yoroi-frontend's Issues

Refactor LocalStorage API

The current LocalStorageApi causes a lot of code duplication if we add more settings (which we plan to)

code here

There should instead be a type-parameterized class that takes a default value as an argument that we reuse for these settings.

Hopefully this refactoring would also allow us to add // @flow to the file to enable type-checking

Integration with rust crypto library

"DateFrom should be a valid datetime" in CircleCI

During CI builds, we often get failure on POST /api/txs/history which has the error message DateFrom should be a valid datetime in CircleCI. This is not cause by a date format issue, but rather because the response from /api/txs/history was invalid.

Location in the code:
https://github.com/Emurgo/yoroi-frontend/blob/develop/features/support/mockServer.js#L62

Proposal
A) Validate req.body and return the appropriate error message on failure
B) Figure out the root cause

Example
https://circleci.com/gh/Emurgo/yoroi-frontend/163

Update the link once IOHK migrates away from the Cardano-SL repo

yoroi-frontend/app/api/ada/adaTypes.js

Line 7 in cd8afff

* TODO: Update the link once IOHK migrates away from the Cardano-SL repo

localStorage is directly manipulated from multiple locations

localStorage is directly manipulated from multiple locations, which i feel will be pain if application grows and when need to implement common change to localStorage.

And it's more readable if we have one pipeline to communicate with outside world (for localStorage).

27/11/2018 Yoroi Developers Meeting

Add topics in this issue that you think should be brought up during our weekly developer meeting.

Time: 14:00 - 15:00 (JST)
Hangout link: https://hangouts.google.com/hangouts/_/qvdzenjqzzffbhigjj2gugtjcme

Tentative Agenda:

• Discuss issues under triage
• PRs merged this week
• Trezor support progress

how about using Prettier formatter?

cc @nicarq @SebastienGllmt

add pre-commit or pre-push hooks to force code format/conventions checks

improve user friendliness while [ Create a new wallet ] OR [ Restore wallet from backup ]

While [ Create a new wallet ] OR [ Restore wallet from backup ] if user presses ESC key or clicks somewhere apart from dialog box anytime then,
Dialog box is closed and user have to repeat whole process even if he has written RECOVERY PHRASE and about to complete the wallet creation.

One Solution:
we should only close dialog box if user presses "X" button.

Testnet

Is there a default mnemonic to restore the wallet using these test data?

Heuristic for picking address for Daedalus migration

Problem

When we migrate a Daedalus wallet, we send all the balance to the first address generated by the Yoroi wallet (even if this address has already been used in a different transaction)

yoroi-frontend/app/api/ada/daedalusTransfer.js

Line 89 in df1d3ac

return addresses[0].cadId;

Rationale

• If we generate a new address for this and the user's already generated 20 unused addresses, then it would go to the 21st and wouldn't be covered by the scanSize during recovery
• We could iterate over all existing addresses and send to the first one that is unused. However, it's possible that the user is waiting for a payment to that address so this may confuse them that is suddenly becomes used by this transfer tx

Heuristics for a better solution

Simple and compliant heuristic

if (less than 20 unused addresses)
    generate a new unused address for migration
else
    send to the first address

Easy to program and easily to take into account for any other wallet for Cardano.

We could also change the restoration behavior so we instead scan 21 addresses but still limit the user to 20. We would keep the 21st address as a special reserved address for Daedalus migration and send to it if the user's already generated 20 unused addresses.

Wallet Creation process and buy Trezor link on Wallet add page (4 links)

Fixed In:#199

show Yoroi with Trezor icon on all pages for Trezor Integrated Yoroi Wallet

Be able to use Tor to connect to the backend

Implement transfer all (rust.wallet_move)

I think this would be a pretty nice UX improvement for users that want to move all of their funds without having to play with the values and fees.

Security

• secure storage of keys
• face/touch/pin auth

POST /txs/history occasionally returns 502/503

POST /txs/history with payload {"addresses":["Ae2tdPwUPEYxYUgxBGgbZXNyj8TMczmHMSjZvm8hJzpt2Y8nDSLtBQAyuZi"],"dateFrom":"2018-01-01T09:44:39.757Z"} return 502 / 503 occasionally (every 4th or 5th request)

Note: this occurs on staging (https://iohk-staging.yoroiwallet.com/api/txs/history) and mainnet

Tested from Europe/Slovakia

Theory: maybe a single host behind a load-balance is unavailable

Rename "test" to "localhost" (or something else)

We have a few different environments that you can run Yoroi with (mainnet, staging, testnet, develop) and we also have one called test

test is confusing because it sounds like it should be testnet but actually test runs on your local machine using localhost.

I suggest we rename test to localhost or perhaps another name that clears up the confusion

should support USD, JPY auto calculation function

ESLint warnings -> errors

Right now we can pass CI even with ESLint warnings

There is no way to turn warnings -> errors through command line arguments unfortunately. We could turn all warnings in the .eslintrc to errors but I think the concern for this was that if we make the lint automatically happen on hot reload, it would frustratingly fail your compilation.

Too many users send empty logs

Too many users send empty logs because they expect that logs are persistent. We should make the logging persistent, maybe we could limit it for 24 hours.

Remove environment.API entirely

environment.API originally came from the fact that Daedalus was meant to support ETC/ADA/Bitcoin/etc

Yoroi is a Cardano wallet and we won't support other currencies (at least for a long time) so this just causes pointless code bloat.

Even though we don't use this feature, there is an argument to be made to pretend we have this requirement anyway to keep everything clean. I'm definitely tempted by this argument so I'm want to hear what others think

Trezor hardware wallet integration

https://docs.google.com/drawings/d/1tttCjHm8RuMEMRTauDAJlOtyOuQYLKY7OxLpddENP80/edit

https://github.com/Emurgo/yoroi-frontend/tree/feature/trezor-integration

Fix error for "An error occurred" on transaction send screen

This error is described here.
input-output-hk/project-icarus-chrome#168

Note from IOHK:

The only reason this wasn't merged is that it wasn't a priority and it required developing an E2E test

should able to make balance zero

transaction without any fraction remained even try to send all ADA (when want to send ada to make the balance zero)

Change Daedalus Recovery Dialog

I feel like "Do you have access to a working version of your Daedalus wallet?" is not the right question since even if they have a working copy, transferring your funds using the mnemonic is way easier.

Maybe the question should be "Do you have access to your Daedalus 12-word recovery phrase?" (note: if we choose this wording, we would have to flip "yes" and "no")

Add "reorganization transactions" to Yoroi (UI)

Concept
Sometimes users make transactions to themselves. It's inappropriate to label this as outgoing or incoming so we need a new category. I suggest reorganization to match the terminology used in the Cardano Wallet Spec.

Motivation for such transactions

1. Sometimes a wallet has a large UTXO that they would want to split into many small UTXO. Doing such makes your payment-to-change ration closer to 1.0 which helps improve privacy on transactions.
2. Sometimes a wallet has a lot of dust they would like to group together
3. Once we have smart contracts in the SL layer, some utxo may be associated with special meaning. You would need to reorganize your UTXO to give special meaning to a UTXO of the right amount.
4. Using a chimeric ledge means you would have to do transactions with yourself to convert between transaction-based and utxo-based models.

This will require a UI change (new icon, new way to display the fees, etc)

The current UI for this is at best misleading and depending on your definition also a bug.

Allow caching requests w/ extra data instead of only arguments

In Yoroi we have a CachedRequest object that takes wraps API calls and doesn't reissue them if its result is already cached. However the cache is based off arguments to the function. But what if you want to cache based off a key that isn't part of function arguments?

Good news: in Javascript passing extra arguments to a function does nothing (as if it truncates the unnecessary arguments. See picture below). Therefore you can abuse this to make API calls that cache based on the time of a query. However, if you add extra arguments to these functions in the future, this could cause a problem
Therefore, be careful about adding new arguments to any functions part of the Yoroi API because it could randomly get garbage arguments

I haven't checked how many functions to this, but at the very least getBalance does this. This is dangerous design for obvious reasons so we should get rid of it.

Example

Above is a screenshot where you can see arguments has the current date as an argument to getBalance despite the fact getBalance takes no argument.
This is because getBalance is cached by the Date of the last transaction you've received

on TRANSACTION/SEND/RECEIVE page of not hardware integrated wallet add links to promote Hardware wallet (2 links)

Fixed In: #199

memo could be added for transactions

Timestamp to Yoroi error logs when logs are empty

When the Yoroi error logs are non-empty, every entry has a timestamp associated to it so we can easily correlated with out backend AWS logs.

However, we occasionally have bugs that for some reason do not show up in the error logs. To help debug these, we should print a timestamp in the error logs to get a rough estimate of when the bug happened so we can then match that against our backend logs.

multi signature for transaction, withdrawal, etc

Filter truncated addresses from backend-service response

In the Haskell importer we truncate addresses that are over 2K in size.
If we plan to make this behavior permanent, we should filter out addresses 2K in size from any backend API request.

We could also choose to filter these from the backend-service side instead.

Integration with yoroi backend

POST /txs/history error when over 50 addresses

POST /txs/history seems to return 500 Internal Server Error if we send too many addresses (specifically the limit is apparently 50 addresses, 51 throws an error)

The backend should return a 400 Bad Request with some reasonable explanation

Code that causes this: https://github.com/Emurgo/yoroi-backend-service/blob/ff1efefb2a5db1c75fa2afad086479d9d97f93aa/src/routes.js#L25

Chrome errors don't show up in logs

Note: The example errors in this issue all originate from accidentally having 2 copies of Yoroi running in the same browser so don't bother investigating them.

Errors such as

OPTIONS https://iohk-mainnet.yoroiwallet.com/api/txs/history 502

OPTIONS https://iohk-mainnet.yoroiwallet.com/api/txs/history net::ERR_NETWORK_CHANGED

are generic network errors that occur in the console but don't show up when you try and download logs as they were not explicitly generated by Yoroi. However, these errors cause real errors later on.

This can actually get really bad in cases such as uncaught exceptions which appear in the Chrome log but don't actually show up in the Yoroi logs

Example: The follow doesn't show up if you download Yoroi logs

yoroi.bundle.js:1 Uncaught (in promise) 
t {id: "api.errors.GenericApiError", defaultMessage: "!!!An error occurred, please try again later.", values: {…}, message: "api.errors.GenericApiError: {}", name: "t", …}
defaultMessage: "!!!An error occurred, please try again later."
id: "api.errors.GenericApiError"
values: {}
message: "api.errors.GenericApiError: {}"
name: "t"
stack: "t: api.errors.GenericApiError: {}↵    at t.<anonymous> (chrome-extension://ffnbelfdoeiohenkjibnmadjiehjhajb/js/yoroi.bundle.js:1:132197)↵    at a (chrome-extension://ffnbelfdoeiohenkjibnmadjiehjhajb/js/yoroi.bundle.js:1:421708)↵    at c._invoke (chrome-extension://ffnbelfdoeiohenkjibnmadjiehjhajb/js/yoroi.bundle.js:1:423112)↵    at c.e.(anonymous function) [as throw] (chrome-extension://ffnbelfdoeiohenkjibnmadjiehjhajb/js/yoroi.bundle.js:1:421887)↵    at r (chrome-extension://ffnbelfdoeiohenkjibnmadjiehjhajb/js/yoroi.bundle.js:1:6312)↵    at chrome-extension://ffnbelfdoeiohenkjibnmadjiehjhajb/js/yoroi.bundle.js:1:6427

Suggested fix:

1. Don't allow two copies of Yoroi at the same time (not easy apparently)
2. See if we can somehow add a hook to watch generic Chrome errors and add those to our logs also

transaction history should also be downloaded in csv format

refactor api/types in order to remove ambiguity

basic idea is to make it like:
app/flowtype.CamelCase.js

1. remove ending Type and Types
2. make it CamelCase (wtih leading capital letter )

Remove duplicated ToS?

We have two copies of our ToS: one for the mainnet and one for else
The logic for this switch is located here

Is there actually any reason to have this feature? We inherited it from Daedalus but they don't use it either (in fact, looking now I see that one of their ToS is an outdated version of the other which kind of proves my point that this is bad duplication)

see folder for ToS

Quick links feature

Provide an ability to initiate sending funds apps dialogs based on "quick links" with universal URL Scheme.

It will allows to open compatible applications on "send screen" with preinstalled data like receiver address, amount of funds to send and token symbol (for the future multi-currency cardano blockchain support) from QR Codes, online shops and etc.

Example:

http://kxp.one/cardano.html?address="< some address >"&amount="100"&token="ADA"
or https://send.cardano.org?address="< some address >"&amount="100"&token="ADA"
or whatever you decide...

For URLScheme this link will looks like
cardano://send?address="< some address >"&amount="100"&token="ADA"

Web page logic:
Internal page script should check available apps that could open URLScheme (for iOS and Android apps) or to call chrome extension method. Then redirect inside the available one with focus on sending funds context with preinstalled context info.

For Yoroi chrome extension:
Try to call custom js function:

function cardanoSendFunction() {
    chrome.runtime.sendMessage('ffnbelfdoeiohenkjibnmadjiehjhajb', {
      message: "cardano://send?address="< some address >"&amount="100"&token="ADA"" 
    });
}

where: "ffnbelfdoeiohenkjibnmadjiehjhajb" - Yoroi chrome store extension ID.

If it fails, then - you don't have supported chrome extension.
Next try to call URL Scheme link. If it fails too -> present verified apps download page.

Yoroi chrome extension integration guide:

(already tested - should works safely)

1. Provide externally_connectable manifest info:

"background": {
    "page": "background.html"
  },
...
  "externally_connectable": {
    "matches": ["*://*.kxp.one/*"]
  },
...
  "permissions": [
    "tabs",
    "storage"
  ],

2. Add background.js external messages listened
   chrome.runtime.onMessageExternal.addListener(< some function >);
   Function description:
   If it starts with "cardano://send"... - check message info and open Yoroi chrome tab with send funds dialog; Preinstall data from message url params.

Upcoming iOS and Android apps (Yoroi? =)) integration guide:

Please visit official vendors pages for more info. It must be easy to implement. I did it many times.

Apple URL Scheme Guide:
https://developer.apple.com/documentation/uikit/core_app/allowing_apps_and_websites_to_link_to_your_content/defining_a_custom_url_scheme_for_your_app?language=objc

Android Guide:
https://developer.android.com/training/app-links/deep-linking

Less efforts to implement but we could get so much profit of it...

app/api/ada/_createWalletFromServerData name is irrelevant to Yoroi

app/api/ada/_createWalletFromServerData
we should give it a better name.
it only coverts wallet data fetched from localStore to new Wallet object, there is no server involved.

update rustup guide in README.md

Running:
rustup target add wasm32-unknown-unknown --toolchain nightly-2018-06-05

Throws error:

Works when follow following step:
https://www.hellorust.com/setup/wasm-target/

Also in precondition, we should add to install gcc

add password usages declaration

While setting password user does not know why he is setting password and when he will use it, how about adding a note that this password will be used when sending ADA.
( so user might set a better and secure password )

Invalid Witness on wallet recovery

I entered the recovery phrase, then go to the screen with the addresses,recovered balance, final balance, etc. which all seemed correct. Then when I clicked the transfer funds button on that screen it just said "Unable to transfer funds"

[2018-10-09T18:26:07-04:00] yoroi-backend-api::sendTx error: {
  "stack": "Error: Request failed with status code 400\n    at createError (chrome-extension://ffnbelfdoeiohenkjibnmadjiehjhajb/js/vendor.js:44798:15)\n    at settle (chrome-extension://ffnbelfdoeiohenkjibnmadjiehjhajb/js/vendor.js:87142:12)\n    at XMLHttpRequest.handleLoad (chrome-extension://ffnbelfdoeiohenkjibnmadjiehjhajb/js/vendor.js:44671:7)",
  "message": "Request failed with status code 400",
  "config": {},
  "request": {
    "response": "{\"code\":\"InvalidContent\",\"message\":\"Invalid witness\"}"
  },
  "response": {
    "config": {},
    "request": {
      "response": "{\"code\":\"InvalidContent\",\"message\":\"Invalid witness\"}"
    }
  }
}
[2018-10-09T18:26:07-04:00] DaedalusTransferStore::transferFunds {
  "message": "api.errors.invalidWitnessError: {}",
  "name": "t",
  "stack": "t: api.errors.invalidWitnessError: {}\n    at chrome-extension://ffnbelfdoeiohenkjibnmadjiehjhajb/js/yoroi.bundle.js:1:46978",
  "id": "api.errors.invalidWitnessError",
  "defaultMessage": "!!!The signature is invalid.",
  "values": {}
}

add default button for trezor connect pages

User would be able to invoke buttons with single key press from keyboard on trezor connect pages

Show server status inside Yoroi

Whenever our server gets into a bad state, users will experience messages like "An error occurred, please try again later"

We should have somewhere in the app a component that shows whether the server is running correctly. Similar to what IOHK has in https://testnet.iohkdev.io/

Additionally, when the server is down, we should have it linked to our Twitter (or maybe a new account that automatically tweets when the server goes online or offline)

Note: we will have to differentiate at least a few different statuses:

1. Server working correctly
2. Server is down
3. Server experiencing issues (server still up but spike in error responses)
4. User having network problems
5. Server best_block_num is lower than the best_block_num in user's localstorage

In multiple chrome window environment, Yoroi window hiding on Yoroi Icon click

send transactions using trezor sign TX

Text boxes don't line up depending on screen resolution

When you expand/shrink your window, the # of lines required to display the text also changes. If they don't match up, the location of the buttons also doesn't match up

The Y position of the two boxes should always match up for a clean UI

better UX handling in case of not connected to internet or could not connect to backend server

Even when not connected to Internet (or back-end not running properly ) user does not see and proper warning or info.

Example:

1. When user tries to Restore Wallet ( w/o internet connection ) everything seems fine until he clicks Restor wallet button, and an error message is show An error occurred, please try later., even user tries again and it will say the same error message(very generic),

At first place there is already waste of users time, filling WALLET NAME, RECOVERY PHRASE, WALLET PASSWORD , REPEAT PASSWORD and then it shows an error message(no help showing this error message) which makes things worse.

2. Same error message when sending ADA.
   

3. Need to check the whole system for other improvements in case of no internet connection.