Needs more UI feedback

[sshelton76]

Several operations, specifically anything that sends info to the blockchain appear to fail, when in fact they are working in the background. We need to have a busy/wait indicator and perhaps a toaster to update progress on any operation. I recommend we start by adding a toaster and using it to replace all instances of window.alert. Furthermore adding a spinner to the screen with updating text and a constantly moving progressbar would be handy.

[moondancer762]

Would like an 'available' balance to show in the "Send" section. This balance may be different from a total balance, for whatever reason.

[moondancer762]

Under the "Reload" section, a person needs to be able to determine payment method (xBTC, xEUR, xUSD, etc.). Also, please show how much is available of the chosen payment method once it is chosen.

[moondancer762]

Please add a way to logout / disconnect from primary account. This is important, especially when using a friend's phone or a public computer, handing over minor's account when s/he comes of age; no longer using an old Bittrex account, etc. Also, members may need to connect to several different external accounts. I know we are only testing right now, but I just thought it should go on the Future To Do list.

[moondancer762]

The last item gave me an idea: the ability to connect Xvault to multiple external accounts. I have at least 3 which could be connected. Right now, only a single "Primary" account can be connected. Again, for a later To Do list.

[moondancer762]

When multiple external accounts can be connected (later), please add the ability to re-name, or at least give the accounts nicknames, would be needed. These "Primary" tab should probably be renamed "Accounts" and have the accounts listed under that tab.

[moondancer762]

I like the "Exchange" Tab. It's sleek, to the point. I can only add one double/sided suggestion: Allow multiple internal accounts (i.e., for managing minor's accounts) and add a dropdown box so to choose the source account for payment, when multiple external accounts are allowed. (I know: Unicorns pooping skittles).

[moondancer762]

In addition to changing PIN, changing the seed words. Important in case of hack. Probably never going to happen, but if a person's other accounts get hacked, the user will be more comfortable if the seed words (and PIN) can be changed. Perhaps offering the opportunity to create one's own seed words. I can probably come up with 24 words I can remember. This can be helpful for someone whose house burns down, mugged in a foreign city or country, etc. (Unicorns peeing rainbows?)

[moondancer762]

Moved from "PIN dialog is inconsistent": Ability to change PIN in Settings.

[moondancer762]

Change nomenclature of "PIN" to "Safe Combination." Also, to give it the 'feel' of a "Safe Combination," making the entry field look like a safe combination: R__- L__ - R__ Each entry field should accommodate 5 to 10 digits each. This creates a 15- to 30-digit number; and the public will identify it more with a safe combination, rather than a PIN. For my own curiosity, would three separate fields be more difficult to crack, or one long number?

[moondancer762]

Aesthetics: Primary (Accounts) page 1.) On the "Primary" page, place a blank line between the currency box and the "Receive" heading. 2.) On the "Primary" page, place some space between the currency box and the currency amount. 3.) On the "Primary, Receive" page, the WEI balance and QR code square can be placed a line or 2 higher on the page so to have equal space between each. 4.) On the "Primary, Send" page, place a blank line between the "Send" header and the destination address field line. 5.) On the "Primary, Reload" page, remove the words "Reload Account" 6.) On the "Primary, Reload" page, add a dropdown box to choose the following: a.) dropdown box to choose account from which funds will be deducted b.) dropdown box to choose what currency will be used for payment c.) Once payment currency is chosen, show available amount of that currency d.) dropdown box to choose what currency is to be purchased e) Once purchased currency is chosen, show estimated amount to be received, and estimated unit price. f.) Disclaimer and checkbox, to ensure people understand the receiving amounts are estimated. g.) Move "GO" button to under the disclaimer. h.) Change the word "Primary" to "Accounts"

7. On Receive, Send and Reload pages, add a memo/note field with at least 50 characters.

[sshelton76]

To support sub accounts at this stage would require a major refactor of the underlying code. Perhaps it is something we could look at in the future. I will however make a "log out" button that clears the account and the other settings, allowing you to put in a bespoke mnemonic and password to log back in, similar to the way metamask does things.

[sshelton76]

A combination with LRL elements would be too confusing for new users. Plus digital safes don't do that, they just have a PIN pad.

[sshelton76]

Memo fields are not supported in the transfer function of the ERC20 standard. We could support it, but we would need to use approveAndCall on those instead of transfer. Doing this sets both a memo and an allowance. What it does not do is complete the transfer, nor does it deduct from the user's balance. The recipient would then need to be notified that they had incoming money and take affirmative action to claim it. Once the recipient claims the funds either for themselves, or directing it to another account, then the originator's balance is deducted for the amount.

[moondancer762]

Additional section for Main Page: History People will need to download and print transaction history for numerous reasons. On the "History" page: 1.) Dropdown box for which account the customer wants to view 2.) Dropdown box for which currency; also include "all" as a choice. 3.) Dropdown box for which currency to display the balance information.

4. Date range: manual entry for start and end dates with dropdown boxes showing a monthly calendar. 5.) Dropdown box for user to choose which fields to display/print 6.) Dropdown box for how many places past decimal point to display (up to 32; default is 8)

The following information shall be included in the history: a.) Date (YYYY-MM-DD) b.) time c.) "From" account d.) "From" address e.) currency type in f.) amount in g.)"To" account h.) "To" address i.) currency type out j.) amount out k.) exchange rate l.) Transaction value m.) Running Balance* n.) transaction hash o.) note/memo

*Amounts in and out are stated in the currency of that transaction. Exchange Rate, Transaction Value and Running Balance is stated in the currency chosen in #3 above.

View Layout: 1.) "Account History" is centered across top of page 2.) Field choices remain visible at top of page; report will show below it. 3.) Date and time of report is shown 4.) Refresh button is to the right of Date and Time (in case customer changes a choice field). 5.) A grid with Column Labels 'a' through 'o' above. 6.) Show row numbers 7.) Transaction data, in chronological order, is shown in a grid with Column Labels 'a' through 'o' above. 8.) Number cells default to the width of the largest number plus two spaces (one to the left and one to the right. 9.) Address, Hash and text cells then adjust to remaining available space. Lines are single space. If an text cell is too long to be viewed, it is truncated for viewing purposes. User can click on the cell to view it in its entirety. 10.) Include "View Print Layout" button.

Print Layout: 1.) "Account History" shall be 16pt, Times New Roman, Bold, centered on page 2.) Non-transaction information shall be 12pt, Times New Roman, regular 3.) Column Headers shall be 8pt, Arial, Bold, centered in cell 4.) Transaction information shall be 10 pt, Times New Roman, regular 5.) Page: letter-size; portrait

6. )Margins: Left & right and bottom : 3/4": Top 1" (appx. 835 char/line) 7.) "Account History" across top of page 8.) Choice fields remain across top of page; transaction data shows below it 9.) Date and time of report 10.) Refresh button (in case customer changes a choice field). 11.) Transaction data, in chronological order, is shown in a grid with Column Labels 'a' through 'o' above. 12.) Show (and print) line item numbers 13) Number cells default to the width of the largest number. 14.) Address, Hash and text cells then adjust to remaining room, defaulting to: word wrap, auto height (so all information can be read when printed/viewed). 15.) Xvault logo and name print at the center of the page, no more than 1.5" wide and 1" tall unless chosen to be omitted by user.

I'm really sleepy right now, so I'll reveiw later. G'nite.

[sshelton76]

History and most of your other suggestions would be excellent addons after we launch and have resources to hire a full devteam. But right now we need to focus on dialing in what we have to make the UX better. Feature creep at this stage is dangerous.

[moondancer762]

I understand, I'm just leaving ideas as i think of them. They can be moved to a "Unicorns Pooping Skittles" or a "UPS-UI" Section for later, if you like. So, if I start the issue with UPS-UI, you know you can just check to see if it is currently relevant, or to ignore it until later. I know if I start it this way, I'm not looking for immediate feedback.

[moondancer762]

UPS-UI: Destination and Receive "Favorites" Keep a running list of most used destinations and receiving addresses for easy recall. This makes it easy to send to friends, recall a particular address for receiving payroll, wedding gifts, etc.

[sshelton76]

I think a favorites or at least a recently used is a good option. Especially considering what a PITA the QR scanner is being.

[sshelton76]

BTW as a side note. You can tap on a QR code in the app to copy it to the clipboard. So there's that.

[sshelton76]

Alright so as of the latest commit I have reworked the exchange interface and several other components to give feedback as to what is going on. I am closing this issue. I will open a new one for general UI issues.