The address field should throw an error if a user enters a Kusama or other chain public key when sending from a Polkadot account and vice versa (exchanges do this)

Problem

Opening a popup in chrome extension means it is reloading the web app, and it will not save the last state upon account creation.

What I can do

Apply sessionStorage
source

Cute animal picture

List of UI enhancements for the top toolbar:

1. Polkadot at the top should be accompanied by the polkadot icon (also, it should be viewable when clicked);

2. It should say the name of the network connected and not just 'Polkadot' (e.g. Alexander for the POC testnet etc and have the Polkadot icon next to it, so users know its a Polkadot-related network - this will be important UI for when users want to connect to testnets etc even when Polkadot is live)

3. Dropdown should have less height
   

4. Icon sizes look smaller than designs; and

5. Distancing between icons and dropdown looks different to designs.

Clicking on Home should return the user to the dashboard - especially when clicking on create/import screens, which they can get stuck on.

It'll be handy for a mobile wallet with QR code scanning function to transfer funds to the address in the extension.

An account's public key doesn't automatically change when switching between Kusama and Polkadot. This may cause the user to accidentally copy the wrong key.

This may not be a huge issue because funds are still received but exchanges will throwback errors and there may be other unforeseen consequences.

There are white corners on the extension that aren't viewable on other extensions

Settings list in the top right toolbar.

Breakdown of designs and functionality:

1. User clicks top right profile icon, and it drops a number of options (similar to this animation: https://codepen.io/balapa/pen/zvObzO - but not as dramatic and not with expanding tiles - gentle dropdown of options one after another but at a quickened pace so it doesnt take too long )

2. Options hovered over come to the foreground to demonstrate it is potentially selected (ie more shadowing behind the tile)

3. Log out button is moved to these options, and keeps the same functionality - old log out button is removed

1. When a tile is clicked it moves to the top to demonstrate it is selected, and it drops down sub-option(s)

2. X tile closes the options list and resets the top tab to the profile icon. Additionally, clicking on the top tab above the divider will retract all options and reset to profile icon.

3. Back arrow moves user back to previous options

1. User picks a colour, which changes the application theme to one of the other colours that are selectable at the beginning when you first install the application (should show all options except the colour theme already selected)

Additional info: you may have to resize/reposition some of the elements (except the 'Speckle' logo) in the toolbar to fit the button in

NOTE: Please keep this well-documented because we will need to add more options, settings etc down the track. If we can keep this modular and easily upgraded/maintained that would be preferable.

Dashboard UX Enhancements list:

1. Dashboard should display the custom name of the account and not "My Polkadot Wallet"
2. Dashboard should display the newly created account and not go back to the previous account
3. Can't see or copy full public key anymore (suggestion: make the account icon clickable to copy address, and have a '+' icon appear when mouse hovers over it)
4. Closing and opening extension or logging in/out defaults back to the first account in the dropdown list - it should be the last selected account

Restoring by JSON has stopped working.

Need the mnemonic confirmation screen to have clickable buttons with a randomised order.

Need to also prevent copy/pasting mnemonic for confirmation. This is to ensure the user has recorded their backup phrase correctly.

Full breakdown:

1. Clickable QR code button sits next to the public key
2. QR code needs to change for each account selected in the dropdown
3. When clicked, the body of the extension below the banner fades out and the QR code screen fades in (needs to also accommodate the different banner sizes for send screen etc)
4. QR code button needs to persist across the whole extension and not just home screen (so send and other buttons)
5. Display the full public key below the QR code (not the truncated version in the banner)

Note 2 Self

Dashboard currently does not default to a newly imported account, and stays on the previously selected one.

Need the ability to edit account name

Test browser: Google Chrome Version 74.0.3729.131

When user tries to import an ed25519 account by keystore file, it reports error

The extension asks for a password when signing transactions from injections (like in Polkadot.js.org/apps) but you can enter anything in the password field and it will send

When importing an account from the dashboard and selecting 'import via keyfile', both options (either by dragging or clicking to import the file) are not possible on Firefox because the browser extension closes and resets back to the dashboard.

While speckle is still using @polkadot/api 0.76.1 and @polkadot/keyring 0.76.1, @polkadot/api 0.81.1 and @polkadot/keyring 0.93.1 are already released as of writing.
edgeware-node-types relies on those new libs, hence speckle cannot support edgeware until we upgrade to those versions. Certain interfaces are changed in those versions, keyring-vault needs to be updated accordingly

When creating a new account, the first public key displayed by the wallet is not reproducible. If you click the account list, the public key displayed will be different.

Steps to reproduce:

1. Create New Account (e.g. 'Account 1')
2. Record first public key (the "phantom" address)
3. Click on account list drop down
4. Observe account public key
5. Click Account 1
6. Public Key changes

I have tested sending funds to this "phantom" address and the account still receives it. So it may be an undefined key on the keyring or something. However, exchanges throwback errors for being invalid.

First Public Key displayed when account created:

Public Key displayed in drop down:

Public Key displayed every time account is selected:

When user clicks on import from the dashboard account dropdown list, the option to click that dropdown list and return back to another account should still be available next to 'Import Existing Account' at the top.

1. Address and amount sent doesn't properly align within frames

2. Error notifications hang across routes and pushes all information down (sometimes making it impossible to send transactions because the "confirm" button is offscreen)

3. Clicking "confirm" has no button feedback and hangs for a few seconds (which makes it look stuck to the end user while it processes)

4. "Select Chain" screen should have "Polkadot" and "Kusama" pre-selected with "More Chains coming soon". User doesn't need to select them because it has no effect.

We need accounts created in the extension to be automatically detected and compatible with the polkadot.js.org/apps

Need to reposition logout button to the top toolbar: either as a dedicated power button or as a dropdown under the profile icon

1. Have DOT/KSM amount of the account show somewhere on the screen (e.g. in the Amount field, so the user knows how much they can lock for their vote or keep the existing amount frame and make the progress bar smaller).

2. The Proposal/Referenda Tabs are misaligned with an excess grey line to the right. Needs to be more centred and symmetrical.

Need to add remove account functionality

After the recent update for Polkadot JS API, the error shows whenever the transaction happens. @jacogr can you describe error with the code 1010?

Forefox has some weird UI bugs that aren't present on the chrome extension

1. Account Drop down menu causes the background to turn white Partially fixed. Name turns into a grey box now, and background still turns white if Account Name is too long
   

2. If the account name is too long it causes UI bugs in the account dropdown, such as scroll bar disappearing and create/import moving to the right-hand-side (solution, and this was recommended in another issue: character limit on account names)

There are two sub-issues here:

1. Balance is only updated for the first account; and

2. Lets say the first account created is called 'A', and I import a second account called 'B'. I change to account B. It will display the balance as '0' or 'N/A'. If I send DOTs to A, it will change B's balance from 0 to the balance of A.

Getting consistent N/A balances when opening extension. Requires me to switch between accounts a few times before it queries.

List of Dashboard UI Enhancements:

1. Firefox: Dropdown selection sits under Account Name (also, we need to enforce character limits for Account Names so that it doesn't flow past the screen or push the drop down below the name)

2. Contents need to sit closer together (Account name + address) + Balance Box needs to sit a bit higher (per the designs) to make room for more transaction information below

Design:

3. White line to separate top toolbar from the body of the dashboard, see below as reference:

We need a warning somewhere (I'm thinking the send screen) that sending an amount that leaves an account below its existential deposit will cause a wipe of funds

Polkadot minimum: 1 DOT
Kusama minimum: 0.01KSM (?)

User is able to click back and change passwords, which leads to weird bugs: one of which involved the mnemonic confirmation not registering. Also, its not clear to the user what password is required to decrypt the keyfile (At the moment, its the very first one used to login) - especially if they click back thinking they can change it.

Possible solution: A new restrictive screen for creating account via dashboard that only allows for account name + mnemonic.

Foreseeable issue: Once we implement parachain selection in step 3, user will be forced to this screen when creating an account via dashboard.

We need third step in the account creation process, which prompts user to select the substrate chains they want to use. By default, we should have Polkadot Relay Chain auto-selected and Edgeware as an option.

Currently api (network connection) is opened when user opens extension and closed when user closes the extension. The benefit is there is no unnecessary network connection. The side effect is user may experience waiting time for first balance display (It takes about 3 seconds to establish an api connection).

If we move the api connection to background, that means once user opens browser, the connect will get opened until the browser is closed. Given nowadays most people keep browser opens, api connection is probably ready whenever user opens the extension, which means user does not have to wait the 3 seconds whenever she/he opens the extension.

Another benefit is if user start a transaction in extension, the connection won't be lost if impatient user closes the extension straightaway, which will cause unnoticed tx failure.

As promised, here is the issue recap of my on-boarding experience and the little quirks or remarks I have.

First of all it looks nice, great job !
When testing I usually put myself in the situation of a real use case, as if I was on mainnet. I wanted to do things well and when creating my account I decided to store the seed in a password manager. So when the extension is giving me a seed, I copy/paste it on my local password manager. That's actually what the UI is asking me to do (pasting it somewhere secure). Now the next step asks for a verification of that seed.. right so I have to pop up my account manager to check the seed. But at this point the extension looses focus and goes back to the account creation with password. Entering the same strong password gives a new seed.. hence I have no other way than actually writing down this seed phrase whenever it's given to me, pasting it anywhere will never work because the extension will loose focus.

Writing down the seed on a piece of paper is actually what crypto wallets usually recommend, but I'd tend to go the other way: not talking about the seed too much (other than for validators it shouldn't be needed, it's too insecure to "paste it somewhere", and because you create a sr25519 account by default validators aren't your target, so the seed isn't a big deal).

Another approach which I like, is to not bother users with the backup unless they have significant amount of funds say 50$. Don't bother users at account creation, on board them quickly and then teach them slowly, it's a matter of timing.

I did notice after messing up with the UI that I was able to copy/paste the seed in the verification field. But that's not a suitable and safe solution as many users will not paste it anywhere else and potentially lose it.

If user doesnt type in an account name on creation or import, we need the wallet to assign a default name that increments sequentially and doesn't duplicate (such as Account 1, Account 2 etc)

1. On initial account creation process - If a user closes extension screen at the mnemonic generate or confirm step, the user will be taken back to enter their new password when they open extension next time, which may be confusing if they have already done so - it should take them directly back to the mnemonic seed; To achieve this, we may need to store password temporarily but we probably need a timer or something to control how long we want to save the password for.

2. If the user creates a second account but clicks away from the screen, we want to resume directly back to the mnemonic seed when the extension is clicked again and not re-generate the mnemonic again until they leave that screen - this again should have a timer.

Creating an account from Dashboard should have its own screen (like import), and not take the user back to the 1-2-3 steps. This is required:

for general consistency;
to avoid confusion; and
to avoid step 3 when implemented

List of Account Selection Dropdown UX Enhancements:

1. Line separating accounts, and creation + import should not be selectable;

2. The highlighting effect when cursor moves over options isn't noticeable enough; It just needs to be added for create/import

3. Dropdown highlight selection always defaults to the first account in the list, even if another account is selected; This was removed altogether.

4. The highlighted box doesn't cover the whole field (wallet name and public address - maybe move these closer or make the box larger)

5. Dropdown box should be bigger, centered and closer to designs + text should also be a bit bigger (hard to read);

6. Selected account should be highlighted in the dropdown or go to the top of the list, and not always highlight the first account - also, the highlight isnt that noticeable; Removed

7. Sometimes clicking to change accounts doesnt work - extension wont respond and requires a few clicks (firefox and chrome);

8. Ability to move and reorganise accounts in the list; and

9. Grey box on account name when clicking dropdown

I got around it by deleting the 2 unused imports from constants/chains.ts. Review and make sure this isn't critical

Receiving errors when submitting aye or nay votes inside the extension

List of bottom toolbar UI enhancements:

1. Have selected option stay highlighted;

2. Can we have icon colors reflect color theme chosen by user (or a universal lighter color closer to designs)

When the balance of one account is updated (e.g. someone sends DOTs to it), it changes the currently selected accounts balance to the recipient account.

Steps to reproduce

1. Select an account in the wallet;
2. Send dots to another account in the wallet (that account must have a minimum of 103 dots to be recognised in the nodedb);
3. Balance will update for the currently selected account

See gif of reproduced steps

Sadly I have not been following development as closely as I want to as a user. So instead of figureing things out, I'm logging.

If the extension has the capability to inject accounts in dapps, I would really it listed as a supported extension on the polkadot-js/apps UI. Specifically here - https://github.com/polkadot-js/apps/blob/master/packages/apps-config/src/extensions/index.ts#L14

So when a user connects with no extension, it will show the use the list of available with the appropriate links via https://github.com/polkadot-js/apps/blob/master/packages/page-accounts/src/Accounts/BannerExtension.tsx. Here I would really like to have coverage for the full ecosystem.

No pressure, but if the functionality is there (or planned), would love to get it on the list.