After the user receives a blocking modal, like low balance, the transaction should continue when the blocking issue is resolved.

Acceptance Criteria

• A user attempts an on-chain action, receives a Wrong Network modal, then switches to the correct network. The on-chain action should then proceed without requiring the user initiate it again.
• A user attempts an on-chain action, receives a Wrong Network modal, then switches to the correct network. The on-chain action should then proceed without requiring the user initiate it again.
• Switching Accounts should not refresh page, losing the transaction request
• Switching Networks should not refresh page, losing the transaction request

Tasks

• Tests
• Usage documentation

As a user, the app should be formatted with padding and margins for mobile with vertical scrolling only. All modals should also be changed to single column layouts.

When I attempt to connect to a dApp while using a desktop browser without MetaMask I want to be told to install MetaMask so I can use the dApp in my current browser

Acceptance Criteria

• This modal is triggered by the user trying to connect or initiate an on-chain action and a web3 provider isn't detected.
• User must be on an "acceptable browser" (brave, chrome, firefox, opera)
• This modal will persist until it is closed or we can detect Web3 via MetaMask

Tasks

• Tests

Design

When I cancel a connection request I want to know what my options are so I have the opportunity to change my mind or proceed to continue without connecting

Acceptance criteria

• This is triggered by cancelling the connection request in MetaMask or your wallet browser
• "Browse as guest" CTA and X cancels the connection process
• "Send request again" CTA triggers the connection request in MetaMask and the connection request assist modal

Tasks

• Tests

Design

Appears when a user initiates an on-chain action (like transaction) and is currently on the wrong network. Will auto-close when the network is correct. Should appear prior to a Connection Modal if on wrong network. Should resume the user-initiated action (like connect or transact).

• Modal
• Check network logic
• Appears when on-chain action is invoked

Triggers the Connection Modal. Would also be responsible for triggering any
eth.personal.sign(nonce)-type metamask.

This can be a standard button that says "Connect" for now.

• Shows the generic Connection Modal when clicked
• Button only appears when the user's wallet is not connected and the user is not verified

As per the screenshot...

Using:

• Brave browser
• Desktop

Current behaviour:
This is the second/third time I've gone through the connection flow. The connection confirmation has been stored so I haven't been asked again.

The Rimble screens are still displaying as if I need to accept the connection request when the signature request is displaying in MetaMask.

Expected behaviour:
The Rimble screens should sync up with the MetaMask screens so that if MetaMask is asking for a signature, we should display the "Verify your account screen".

In that sense the screens are not in a fixed order, but depend on what is happening in the connection process.

As a user I should see information helping me understand that there is not a browser-connected wallet with steps to resolve.

Show user connected status. Shows user short address. Shows current balance. If balance is low, style the balance in red. Currency internationalization? Maybe click on summary block, show dropdown with option to Disconnect. Can also be space for dApp specific-functionality/navigation. (no blockie here)

• Display public address (truncated)
• Display wallet balance
• Low balance alternate presentation
• [Currency conversion (check MM for this?)
• Dropdown on click
• Disconnect option

When I am able to connect I want to understand more about what connecting involves and which account I should connect with so I don't come into any problems once I'm connected.

Acceptance criteria

• This is triggered by connecting or initiating an on-chain action and all the conditions are right: e.g. correct network, web3 is detected
• It can be closed which will cancel the connection process
• The CTA triggers the wallet connection request or signature request dependent on whether the connection request is required
  • If the user has recently accepted the connection request this step is skipped
  • On mobile the connection request isn't currently implemented unless the user is using MetaMask mobile
• The CTA will trigger the connection request assist modal or signature request assist modal
• There's a link to a modal explaining transaction fees
  • Is this part of this ticket or another?
• Note: This should only show once if the user is not connected and signed-in. If the user continues to 'Connection Request Assist' modal, they will be resumed to that modal again when initiating a Connect or on-chain action that was previously cancelled.

Inputs

• web3 detected: true
• correct network: true
• MetaMask detected: true/false
  • based on if mobile

Outputs

• If MetaMask detected show MetaMask button: "Connect with MetaMask"
• If no MetaMask detected show default button: "Connect"

Tasks

• Tests

Design

Identify and clean up areas that need it.

Some areas to address are listed below:

Modals

• Consistent internal padding on mobile/desktop
• Consistent external margin on mobile/desktop
• Consistent use of iconography (maybe icons should get removed?)
• Scrolling modals allow all content to be visible (Low Funds and Connection modals)
• Text size and spacing consistent on mobile/desktop
• Button widths and placement consistent on mobile/desktop

When a user initiates an on-chain action, or continued from a Connect Button action. Shows user public address. Show QR code action button. Continue button to close the modal. Can be cancelled/closed. Show the current network status.

• Appears when user initiates on-chain action and has low balance
• Check wallet balance
• PublicAddress with 'copy' button
• QR code icon button
• network indicator

A user should see a network indicator displaying the connected network name and associated color.

Follow metamask’s network colors
Main - green
Ropsten - red
Kovan - purple
Rinkby - yellow

• Indicator component with colored circle and network name
• Network connection logic
• Updates when user changes network

Using:

• Brave browser
• Desktop

Current behaviour:
Passive network banner hides the instructions of the Rimble demo.

Expected behaviour:
Passive network banner should not prevent the user from reading all page content. Although pinned to the bottom, it should allow the reader to scroll and read the bottom of the page and display underneath.

When I need to accept a connection request in MetaMask I want to know what to do so that I can continue connecting and if MetaMask doesn't pop up automatically I want to know how to accept the connection request

Acceptance criteria

• This is triggered by the CTA or by the connection request error modal "Send request again" CTA
• It persists until the MetaMask connection request is accepted or rejected
• It can be closed which will allow the users to browse the dApp
  • If the user goes to connect or initiate an on-chain action again they'll get the "Before you connect" page
  • Just by cancelling the modal and not rejecting the request, the MetaMask connection request will still be active in the extension however.

THINKING: in the future this screen may allow users to select their method of connecting (MetaMask, Ledger or WalletConnect) so we should re-present this choice to users who cancel the Connection Ethereum account modal.

Tasks

• Tests

Design

Appears when a user rejects the signed personal message. Return user to Verify Your Account Modal as primary action.

• Appears if the user clicks “Cancel” from a Sign Message prompt
• Can be cancelled/closed
• Secondary action "Browse as Guest" which is the same as close
• Primary action "Send Request Again" re-triggers the MetaMask Connect prompt
• The background modal should change to the Connection Pending Modal when "Send Verify Request Again" is clicked.

Appears when there is an eth.personal.sign prompt in MetaMask. Should show public address user’s eth address. If user cancels from MetaMask prompt, go to Connection Cancelled During Verification Modal. Should recommend specific verbiage for the MetaMask prompt. When successful, show toast with truncated user address.

• Shows user's wallet address
• show network indicator
• On cancel, go to "User Rejected Verify" modal
• Trigger success toast message post-verify
• Prompts user to sign message
• Can be dismissed/cancelled

Appears if the user clicks “Cancel” from a MetaMask Connect prompt and informs them that they can continue as guest or try to re-connect.

• Appears if the user clicks “Cancel” from a MetaMask Connect prompt
• Can be cancelled/closed
• Secondary action "Browse as Guest" which is the same as close
• Primary action "Send Request Again" re-triggers the MetaMask Connect prompt
• The background modal should change to the Connection Pending Modal when "Send Connect Request Again" is clicked.

As a user I should see an informative message that my current browser does not support web3/blockchain/ethereum with steps to resolve.

Triggered when user hits “Connect” button. Connect with MetaMask button is primary action. Modal can be cancelled/closed. Should include current network indicator.

• Connect with Metamask button
• Network indicator

Acceptance criteria

• This is triggered by the MetaMask connection request being accepted or the Before you connect CTA or by the signature request error modal "Send message again" CTA
• This persists until the signature request in MetaMask is signed or rejected
• It can be closed which will allow the users to browse the dApp but as soon as they go to initiate an on-chain action or connect the flow will start from this screen because we can validate that the user has previously accepted the connection request
  • The MetaMask signature request will still be active in the extension
• Once signed, this should trigger a ToastMessage with an Account connected message + wallet summary

Tasks

• Tests

Design

As a user there should be a current value in the count of the primary card.

• Load fallback provider when user has not connected AND verified
• Loads the number from the smart contract

Closely related to #82

This issue pertains to the transaction state work we've been looking into.

We need to figure out:

• can we give users a short window after submitting a transaction to cancel it if they submitted the transaction in error? Similar to how you an undo sending an email in gmail.

It's better to help a small percentage of users rectify a mistake rather than ask all users to double and triple check their Txs

• Can we offer this functionality in the dApp and send it to the wallet? E.g. can a user press a button to cancel a transaction in dApp or must it come from an interaction from within the wallet?
• At what point can a user no longer cancel?
• Can a dApp detect when the Tx in question has been cancelled so we can communicate that information back to the user in the dApp interface?

Pictured below is:

• an example UI for our transaction states: can a user stop a transaction from here?
• the MetaMask UI once you cancel a started Tx (for reference)

I believe this is important. The window for cancelling a transaction will likely be small so if we can save users seconds by allowing them to do this from the dApp UI this should make life easier for them.

Team decision needed: remove close icon or make the icon close the modal.

When I attempt to connect to a dApp and I'm on a browser that can't support Web3 (even by installing MetaMask) I want to be told which browser to use so I can connect.

Acceptance criteria

• This modal is triggered when a user attempts to connect or initiate an on-chain action and there is no network detected and they are not in an acceptable browser
• It can be closed by the user if they wish to continue browsing
• It will always trigger until a suitable browser is detected
• In the Mobile version, the CTA links to the app store so the user can download a mobile wallet

Tasks

• Tests

Design

Replace the current "I am signing my one time nonce: {nonce}"

with...

Hi there from Rimble! To connect, sign this message to prove you have access to this account. This won’t cost you any Ether. To stop hackers pretending to be you, here’s a unique message ID they won't be able to guess: {nonce}

Variation for the connection modal displaying different content, which is triggered when a user initiates an on-chain action. Connect with MetaMask button is primary action. Modal can be cancelled/closed. Should include current network indicator. Might not make through testing.

• Appears when user initiates on-chain action and is NOT already connected and verified
• Connect with Metamask button
• Network indicator
• Modal can be closed

Closely related to #83

This issue pertains to the transaction state work we've been looking into.

We need to figure out:

• can we detect when a transaction has stalled e.g. not been picked up after 30 seconds? This is usually because the user has edit the gas price too low and no miner wants to pick up the Tx.

MetaMask offers the user the option to "speed up" said transaction... which I believe resubmits the transaction with the same `nonce` in the hope it will be confirmed quicker than the previous stalled transaction which will then fail because the `nonce` will be invalid.

• Can we offer this functionality in the dApp and send it to the wallet? E.g. can we tell the user their Tx has stalled and give them the option to increase the Tx fee (either within the dapp or deep link the user into the relevant area of the wallet UI where they can resubmit the transaction).
• Can a dApp detect when the Tx in question has been resubmitted so we can communicate that information back to the user in the dApp interface?

Alternatively...

• Is there a way we can detect if the user has edited the gas price to such an extent that it puts their Tx at risk of stalling/failing. And try and intercept them with a warning e.g. "Your transaction fee might not be enough to complete your transaction. We recommend increasing it"

Currently looks horrible in Cipher and also doesn't work.

Should we be practicing mobile-first design and development practices?

• Events (when number changes)
• Stream of all contract transactions

As a user attempting to interact with any web3 functionality on the dapp, a modal should fire a warning that the current browser does not have a wallet connected and there should be a link to download metamask.

• Show modal when attempting on-chain action
• Show modal when attempting connect action
• Close modal

As a user there should be a current value in the count of the primary card.

• Load contract after fallback provider set
• Call getCount() on smartcontract after contract loaded

Appears after user clicks the “Connect with MetaMask” button from the Connection Modal. Prompts MetaMask with Connect prompt.

• Modal with network indicator
• Modal can be cancelled/closed
• Modal is closed when use Connects via MetaMask

When a user is connected to the wrong network, she should see a bottom full-width banner which informs user to switch network.

Banner is persistent and cannot be dismissed
Banner is automatically dismissed when the user switches to the correct network

• Banner component
• Check network logic
• Updates when user changes network
• Does not cover any page content
• Always visible on page

When I cancel a signature request I want to know what my options are so I have the opportunity to change my mind or proceed to continue without signing

Acceptance criteria

• This is triggered by cancelling the signature request in MetaMask or your wallet browser
• "Browse as guest" CTA and X cancels the connection process
• "Send message again" CTA triggers the signature request in MetaMask and the signature request assist modal

Tasks

• Tests

Design

When I attempt to connect to a dApp and I'm on the wrong network I want to know which network I should be on and where to change it so that I can start connecting

Acceptance Criteria

• Appears when the user tries to connect or initiate an on-chain action whilst on the wrong network
  • Upon successful detection of required network, connection flow should start
• Persists until the required network is detected or the modal is closed
• OK CTA on mobile closes modal as mobile users may need to navigate away from this screen to change their settings
• If none of the official networks (main, ropsten, rinkeby, kovan) are detected use "custom network"

Tasks

• Tests

Design

Button appearing with Connection modal(s) that triggers a MetaMask connection request.

• Button style
• Trigger connection request
• Hides the Connection Modal
• Shows the Connection Pending modal

As a user attempting to interact with any web3 functionality on the dapp, a modal should fire a warning that the current browser is not web3 capable with link to download web3 capable browser.

• Show modal when attempting on-chain action
• Show modal when attempting connect action
• Close modal

After the first Connect popover window appears, all subsequent MetaMask requests are no longer presented in a popover window but appear as a numbered pill over the MetaMask extension icon in the browser.

Possibly related to polling for account updates.

I was running the demo por the first time and got the error: Attempted import error: 'PublicAddress' is not exported from 'rimble-ui'.

I've found the new component is called EthAddress so I replaced it on LowFundsModal.js. That solved the problem for the kick-start.