Motivation

We would like to be able to have deterministic tests, so rather than using the wallet that is configured it would be helpful to be able to switch to different wallets to test different states and have a new state for each test.

There is already a CLI flag for this.

Wallet Service as a menu item may not mean enough to a user - ideas for a better name? Should we also get rid of the word “proxy” here? It’s no longer used in the CLI. Connect to Console or Load Console might do the job.

• Consider renaming wallet service
• Replace usage of the word proxy on the service view with something easier to understand

We want the user to be able to create its very first wallet through the desktop wallet at a location of his choice.

Today the desktop-wallet only support loading wallet from the default wallet location.

We need to support any custom root-path.

We need to unify the root README and the frontend/README.md and update the instructions.

• Make labels used in the network config page (and edit page) align better with what is used in the footer to indicate running services and proxies
• Consider url labels across token dApp and Console when connecting to wallet. These should be consistent
• Rename proxies or possibly drop the word 'proxy'. Eg just 'Connect to console'

Further changes

• Remove service page
• Changes to footer to allow starting/stopping

At the moment the fields are only set as required, but there are further checks we could do, for example Node Retries should be validated as a number.

Users will want to see there keys. Need a way to access them. The equivalent of ./vegawallet.exe key list

If you create a fresh wallet using the app, and then try and retrieve the config using window.backend.Service.GetConfig nothing is returned. So you are unable to edit the config of your newly created wallet.

Per comments here: https://vegaprotocol.slack.com/archives/C02KSKW6Y3F/p1642015170001500

• Make the prompt telling users to copy down their back up phrase more prominent
• Show version number after wallet creaation and also prompt users to note it down

This error shows when importing a network config and entering a URL into the file path (you know, for kicks)

Thoughts

• css wrap property
• overflow scroll
• truncation that you can expand (which creates an overflow scroll)
• Max with on the div that is same as view port?

The config edit form doesnt support editing your hosts. Would be good to be able to add and remove nodes from the list.

Feature request: In a world where the wallet is opened with a UI... Have a splash screen open to give the user some feedback that the service is running, so that they can then continue with their task (e.g. launching console).

It could include:

• Version number
• Link to launch Console (the splash screen close on "Open Vega Console"

To improve the discoverability of our UI, we would like to have helper bubble on the UI to guide the user.

To quote @mattrussell36:

One thing I’d also like to add to the list of things to do is to touch up the desktop icon a bit it doesn’t look quite right (at least on a mac)
We should:

• round the corners
• make sure the V is sharp, its a little blurry right now
• Make it a tad smaller with some transparent background

Here it is in my dock:

• Don't require name field. Re-add advanced fields section to hide away the name field and force checkbox. If the users tries to import a network with a name that clashes with a current network. Lets programmatically open the advanced field section and highlight/focus the name field with suitable messaging
• Clarify the file path vs URL import type. Its not 100% clear that you only need one of these fields. Perhaps we need a radio button to select between 'file path' and 'url'.
• Add further guidance where required to help users import networks. Possible link to here https://docs.vega.xyz/docs/tools/vega-wallet/cli-wallet/latest/guides/manage-networks

Per comment here: https://vegaprotocol.slack.com/archives/C02KSKW6Y3F/p1642015170001500

Re-order fields based on relevance to the user. For example log level is not that important for most users but it is at the top. Suggested order top to bottom:

• Service host and port
• Console url and port
• Token dApp url and port
• Node lists
• Node retries log level
• Token expiry

After connecting to a wallet, I can see a truncated version of the public key and a wallet name. I don’t think it’s totally obvious what those are. They could use some headings, or guidance. (Will also help reinforce the terminology of “wallet name”)

• Add headers for key alias and public key
• Add label for wallet name eg 'Wallet name: <wallet_name>'

Show the keys to the use once they have selected a wallet

To align with discussed processes in other repos and new processes discussed we will:

Add the GH Action to move new issues to the new project board for triage
Update the linked PR GH Action version
Add a GH Action to validate the changelog is updated
Back date the changelog so it can be updated moving forward from now on

Some of the error messages coming from the backend are not at all helpful for a user to self-debug.

Incomplete list of bad errors below. Worth checking every function provided by the backend.

• Import wallet with invalid recovery phrase
• couldn't read network configuration at
  https://raw.githubusercontent.com/vegaprotocol/networks/master/mainnet1/mainnet1.toml
  couldn't read file at
  https://raw.githubusercontent.com/vegaprotocol/networks/master/mainnet1/mainnet1.toml
  couldn't read file at
  https://raw.githubusercontent.com/vegaprotocol/networks/master/mainnet1/mainnet1.toml
  https://raw.githubusercontent.com/vegaprotocol/networks/master/mainnet1//mainnet1.toml
  couldn't read file or directory
  https://raw.githubusercontent.com/vegaprotocol/networks/master/mainnet1.toml
• ... TBD

We want to expose the console in the project the the future front end can call it.

The desktop application will access the wallet through the console.

If a node is not responding, there's no way to find out without actively researching via CLI and digging around, as per @campbellssource's experience. Having a view that lets someone see if the mainnet node they're connecting to is working well would be a nice thing to have.

Seems like the scrolling gets stuck when going to the edit network page then coming back to another page.

How to reproduce

• Start the wallet
• Go to the network page
• Click edit
• Scroll down to the bottom
• Click on the wallet service tab without saving or anything
• You're stuck!

This use is unable to change the version on the input labeled * Version on http://localhost:3000/#/import/recovery-phrase

hitting the up/down steppers does nothing,
can't delete the value and re-type
up/down keys do not change it.

We would like to distribute the wallet as a desktop application using a cross platform bundler.

• Scaffold project to work with a bundler
• Setup the CI to build the project on Linux, MacOS and Windows.
• Ensure the react app is aligned with our frontend guidelines

Possible bundler: https://github.com/wailsapp/wails/releases

This project should inherit the name of the CLI project, plus the suffix -desktop

Blocked by:

• vegaprotocol/go-wallet#284

Immediately and automatically create the first keypair for each wallet

• generate
• annotate
• describe
• isolate
• taint
• untaint

We need to give the user the ability to import a wallet using his mnemonic, to a location of his choice.

Some users are willing to send handcrafted transaction but doesn't know how to craft one. Having a dynamic form to help them doing it could be good.

Per title

Add Cypress tests to cover all frontend functionality:

• List all flows for testing

• Wallet management
• Key management
• Network management
• Services?

• Write tests

When starting the program, it should warn the user about newer version.

Would be good to have some UI that makes users enter their recovery phrase after wallet creation to confirm that they have taken a copy of the phrase.

This could be manual entry of the words or perhaps clicking the words in the right order.

An action exists for most of the other repos that the front end team work on, that adds them to this project:
https://github.com/orgs/vegaprotocol/projects/110/ with a status of new
This means we can check the new issues as part of our sprint process.

This to do the same for desktop wallet. But it should only be for the tickets with the Frontend label

Some of the links in readme are now old

We want to be able to edit the wallet service configuration through this application.

• Make the x icon more squared off aligning with Vega style
• Ensure text colors are readable on the different 'intent' backgrounds.

Perhaps adjust colors so intent colors work with black or white text for easier theming

We should disable submit button once clicked to avoid multiple submission of forms, that's trigger "already existing..." errors.

We need to add a button to start and stop the wallet service.

Its not clear what a user should do next after having created a wallet and keypair. We should show some info about next steps, perhaps to do with importing a network configuration

• Guidance copy shown after creating a wallet, possibly only shown the first time you create a wallet. Perhaps a different CTA to direct to import network
• Possible guidance copy shown after generating a keypair The first keypair is now auto-generated