[wallet-ui] Next features and test suites

[joelalejandro]

After work on #1713, we should finish migrating some pending features from the Playground, that are relevant to the Wallet UI experience. Also, we should continue our testing efforts.

Features to add

• Exchange screen
  • Deposit form: This is the same as the onboarding deposit flow, except there's no multisig deployment, it's just a regular deposit to a pre-existing multisig.
  • Withdraw form: This is the opposite of the deposit operations, it transfers funds from the CF account to the Ethereum wallet.
• Node/Dapp-related events
  • Allow the user to accept or reject a proposeInstallVirtual ([wallet-ui] Show a MetaMask notification when chan_proposeInstallVirtual is received #2144)

Features to discuss

State channels screen

InVision: https://projects.invisionapp.com/share/9PQ8DASYM3W#/screens/361728445

The State channels screen shows a tree view containing three types of leaves: the Hub (aka simple-hub-server or connext), the User (a real person or a bot), and the Dapp itself.

• We currently have an API that returns all state channel addresses. What's the best way to build a data source to accommodate the UI?

There are some actions a user can perform:

• Launch: A user can re-open a Dapp if it has a state channel open with it.
  • How do we know what's its URL? Where do we store that information?
• Debug: An advanced user (such as a developer) could want to inspect the state of the channel.
  • Should we render the output of a GET_STATE operation here?
  • What data is relevant to show? How can we arrange it properly?
  • Should this be our own version of an "inspector" feature?
• Uninstall: A user can end the state channel by uninstalling it, triggering the UNINSTALL operation.

Testing

Learning from previous mistakes, we're building tests for every component and looking into integration flows. Now that we're working with React, we have better-supported tools to do this. With this in mind, we can resume the PoC we did a couple of months ago with the WebDriver that auto-configures the Metamask extension, allowing us to test a dapp interacting with our Wallet.

This list will change as we analyze in more detail what we need to test.

Test suites

By component/module

• Root-level App component
• UI components
  • AccountContext
  • ChannelNode
  • ChannelTree
  • FormButton
  • FormInput
  • LayoutHeader
  • WidgetCard
  • WidgetErrorMessage
  • WidgetHeader
  • WidgetLogo
  • WidgetScreen
  • WidgetTooltip
• Pages
  • Welcome
  • Account registration
  • Deposit (onboarding)
  • Channels
• Store modules
  • Channels
  • User
  • Wallet
• Utils
• Hub API Client

By scenario

• An unregistered user should be able to setup Counterfactual by creating an account with the Hub and making a deposit ([greenboard] Implement E2E tests #1906).
• A registered user should be able to login to their account and see their CF balance ([greenboard] Adds Login scenario #2134).
• A registered user should be able to make deposits ([greenboard] Adds Deposit scenario #2135) and withdraws ([wip] [greenboard] Adds Withdraw scenario #2136).
• A registered user should be able to play a game with a bot.

[joelalejandro]

@snario @ebryn @cf19drofxots @IIIIllllIIIIllllIIIIllllIIIIllllIIIIll @patience-tema-baron @Alonski - Would appreciate your feedback for the questions we have under the "Features to discuss" section.