Currently the settings dialogs only features the close button, however, depending on the step in the different flows, that isn't always correct.

For example, the vote for delegate flow:

• Step 1 (selecting the delegate). The close button should be visible
• Step 2 (confirming the transactions). The back button should be visible taking the user back to previous step & the close button should be visible to get back to settings.
• Step 3 (broadcasting transactions). The user should not be able to exit the dialog (no back nor close button). The ESC key should also not close the dialog.
• Step 4 (broadcast success/error result). The close button is visible again.

Get in touch with @vekexasia regarding the new API endpoint, which supports error messages

Blocks: #35

The vote delegate form should display an error message (like setup 2nd passphrase and register delegate forms) when the account balance is too low to submit the vote transaction.

The back and close buttons don't have aria attributes for accessibility.

Some of the API calls use fetch and have to be converted to dpos-offline and dpos-api-wrapper

Many places are missing translations

• register delegate form - username
• register delegate form - balance
• send transaction form - recipient, amount input, balance
• confirm transaction form - mnemonic, 2nd passphrase (see below) [#56]
• remove account form
• confirm transaction form - confirm (new) 2nd passphrase #54
• 2nd passphrase

Typesafe mobx inject method - mobxjs/mobx-react#256

Eg no "Unnamed account" next to "Unnamed account"

The drawer should truncate long account names, so that the rows wouldn't grow vertically in size. This is how it currently looks for a longer name:

• include the dialog
• include the account ID

Divide /components/forms/SettingsPassphrase into:

• /components/forms/SettingsPassphraseForm (not an Observer)
• /containers/wallet/SettingsPassphrase (an Observer)

In the vote delegate dialog, the search only works when searching by username. When searching by account address, it doesn't work.

When switching between accounts quickly, the transaction list loaded can be that of the previously selected account.

Steps to reproduce:

• Enable "Disable cache" and speed throttling ("Fast 3G") in dev tools
• Click between two or more accounts ~500ms apart (eg select "Account 1" and then "Account 2")
• Notice the transaction details shown are for the previous account (eg "Account 1" details when "Account 2" is selected)

Currently the signout button in the wallet components signs the user out immediately.

Mocks in #1

Current state:

We should not be using floats to represent money. Floats by design cannot represent exact values and it is bound to create weird bugs down the line, where the user enters a value with many decimal places and then ends up sending a different value.

A proper decimal (library) that represents the value exactly should be used instead.

The current theme colors result in this bright green color for UI elements (settings toggle, FAB [if not overriden]). A better color combination should be selected in the global theme provider for everything to look nice without having to override colors constantly.

This is a tracking issue for various accessibility problems we still need to address.

• Progressing to transaction overview and onwards is invisible to the screen reader
• The account overview isn't really usable with a screen reader
• Use <a href> for navigation elements - #85
• Security tips are visible to screen reader before the button click
• Settings pinned account button doesn't expose current value to accessibility tools
• Migrate forms to dedicated dialogs with correct labelledby and describedby attributes
• Modal dialog header buttons lack accessibility titles - #47
• Verify mnemonics visual word placement indicator should be aria-hidden
• AppBar comes before drawer content for accessibility tools when drawer is permanently open
• AccountIcon should be aria-hidden to reduce the screen reader noise

Decouple wallet and onboarding stores from rootStore to avoid downloading when not needed

Unify the transaction format passed to the UI. Right now sent and received has different fields, which makes handling complicated.

Extract UI stores from WalletStore

• AccountStore
• TransactionStore

We need to use an external provider for the exchange rates

Add linter rule "," after the last element of array/object (requested by @roosmaa )

Like the old wallet we should implement a push mechanism to get updates from the server. Ideally a less intrusive one than the previous (no pulling).

When searching for delegates in the vote dialog, the returned delegate objects lack the rate field, so uptime is displayed as NaN.

Mocks in #1

Current state:

Mocks in #1

This also includes other states of the dialog (in progress, success, error).

Current state:

• dont show the ID for second sig, voting nor delegates
• time, confirmations, amount, fee, usd

Disclaimer 1: I will be editing the issue description to contain the latest mocks, if you have any comments regarding a mock, please copy the URL of that image into your comment so that the context of your comment would survive my edits

Disclaimer 2: the mocks are more meant to indicate the flow and general design direction. They will have some padding, spacing and font size issues which will be tweaked in the conversion to HTML step.

Account settings

Remarks:

• Each of the rows is a button. All of the editing will happen via modal dialogs, with the exception of "Pinned account" setting as this is a simple toggle and can automatically change it's value without a dialog.
• On smaller screens the value span can be displayed under the label span (and aligned left).
• For watch-only accounts the voting, 2nd passphrase & delegate registration fields should be disabled, but still show the correct state (what the account is voting for, if the 2nd passphrase is set and if they are registered as delegates)
• Most of the modals follow the same-ish conventions as the on-boarding dialogs

Update account name

Select FIAT currency

Remarks:

• The FIAT field is a native <select> element (for good experience on mobile)
• Use has two options, either update FIAT for the current account, or for all accounts in their wallet. This is mostly because we don't have global settings section yet (there's not enough content for it), so we have the FIAT selection under account settings instead.

Add 2nd passphrase

Remarks:

• The mock shows 2 states at once. If the account has insufficient balance, the field and button shouldn't be shown. If there's enough balance the red error message shouldn't be shown.

Remarks:

• This is actually the app-wide shared component for transactions.
• Even though the account doesn't have the 2nd passphrase set yet, we pretend it is to verify that the user actually knows the passphrase they entered in the previous step. [#54]
• Since there's no recipient for funds, only the network transaction we display the RISE logo instead of the recipient account image
• On mobile, the sender labels might have to be moved on top of the sender account image. Then the images are on the same line and then followed by the recipient information on the next line.

Remarks:

• If the reason why the submission failed was due to connectivity problems, the "Try again" button should be visible and resend the same signed tx that's in the memory. If the error is some account state related and the signed TX itself is invalid and will never be accepted, the "Try again" button should be hidden. [#35]

Cast a delegate vote

Remarks:

• The "R:", "U:" and "A:" should be replaced with appropriate icons, on hover the tooltip will appear to explain what they are exactly.
• When the search box is empty, we show the suggested delegates, which is 3 random delegates selected from the 101 active delegates
• If the delegate displayed is currently voted for by the user, the "cast vote" button is replaced with "remove vote" (in red text) button

Remarks:

• The flow from this dialog continues as above for the "add 2nd passphrase"

Delegate registration

TODO

Remove account

Currently the URL mapping is as follows:

• /wallet
• /wallet/settings
• /wallet/send

We should migrate to the following:

• /accounts/:address (e.g. /account/1231413R) for account overview
• /accounts/:address/settings for account settings
• /accounts/:address/send for sending from a specific account
• /accounts for the list of all accounts (accessible from drawer if user has too many accounts)

Blocked by the limitation of TS decorator, FUT microsoft/TypeScript#4881

• array.includes
• object.entries

ES modules build for modern browsers will allow us to avoid transpilation for runtimes which dont need it. Should work based on the script[nomodule] attribute.

Deploy a live demo, ideally directly from a CI

It seems that the first receive transaction doesn't show under the account overview. Only after another transaction is made, does it show up.

Steps to reproduce:

• Create new account
• Send some RISE to it
• Observe the account balance update, but no transaction shows up

• e2e flows for main paths
• unit tests for backend operations

MobX router doesnt support a trailing slash, so those two routes aren't identical:

• /foo/(doesnt work)
• /foo (works)

It's a follow up of #15 and #3.

Global loading indicator component component should be used in App.tsx and Wallet components before the selected account has been loaded

Currently the transaction list looks like:

The screenshot above has these issues:

• "Transfer from X (Y)" label should be "Transfer from Y" as there is no address book entry for that sender
• "Transfer to Cast Vote (Y)" should be "Cast vote for Z" (or "Remove vote from Z") (where Z is the delegate username)

So all of the possible transaction summaries should be verified to be correct.

Onboarding should check if all the params required by the registration are present and redirect to the start page if not.

We should handle uncaught exceptions with a global error handler, either showing a msg to the user or redirecting to a fallback URL (or both).

Delegate search should be case insensitive, but currently it is case-sensitive. For example, when searching for cor and Cor, the results are different.

I don't want to just lowercase the user input as that is probably wrong (as delegates can contain uppercase letters as well). Most likely the API request needs to indicate that this is a case insensitive search.

The code snippet above has a small chance of picking a single delegate into 2 (or more) slots.

One option to fix this would be to shuffle the whole active array and then just selecting a slice from that.

Currently there's no errors form the API we use to submit transactions we don't really have a way to implement proper behaviour for the error states of the transaction dialogs.

The following things need to be implemented:

• Error messages for transaction dialogs, passed from API methods to the ConfirmTransactionDialog.
• Correct behaviour for the "Try again" button.

The behaviour for the "Try again" button is defined in #1 as:

If the reason why the submission failed was due to connectivity problems, the "Try again" button should be visible and resend the same signed tx that's in the memory. If the error is some account state related and the signed TX itself is invalid and will never be accepted, the "Try again" button should be hidden.

Blocked by: #22

Eject create-react-app configs to be able to customize

• es7 for dev env (non-transpiled await etc)
• remove babel from the build chain