[Cashtab] Add reply message function
Summary:
A new 'Reply To Message' option on the transaction history tab for each inbound OP_RETURN message transaction. When clicking on the Reply To Message option, it takes the user to the Send page where the address is pre-populated with the original message sender's address, the minimum 5.5 XEC for the message tx and the Message input field opened by default.
- The parseTxData function in useBCH.js is updated to extract the first vin address as the original sender's address and encodes it into an eCash address, before adding it to the parsedTx object as 'replyAddress'.
- Tx.js has a new <Link> component added which encapsulates the Reply To Message label. This component routes to the '/send' path whilst also passing 'data.replyAddress' to the Send page.
- Send.js checks for the existence of location.state.replyAddress within useEffect() and if found, it prepopulates the address field with the replyAddress and the XEC value field with the minimum 5.5. The <AdvancedCollapse> defaultActiveKey property is also set to 1 (opened) so the Message input field is opened by default if it's a message reply, and set to 0 (closed) otherwise.
- The prepopulation of address/value UX is streamlined for the user to just focus on typing out their reply and hit send assuming they have enough balance. In extension mode, the user is taken directly to the Message input field without needing to scroll down.
This diff supersedes D10495.
The most recent feedback from @bytesofman in D10495 were:
- validateDOMNesting warning about nested <a> in browser console - this is because the Reply To Message <Link> needs to be rendered within the existing <TxWrapper>, which evaluates out to a nested <a> link in the browser. I couldn't see a way around this because otherwise it's hard to keep it in visual sync within the Transaction card.
- Brave browser - I've tested this all ok with Version 1.32.113 Chromium: 96.0.4664.45 (Official Build) (64-bit) on ubuntu. Url field is intended to look standard as the reply address is passed through internal state (lines 413-417 in Tx.js) which is then picked up upon useEffect() (lines 150-155) in Send.js
Test Plan:
- npm start
- navigate to the Transaction History tab and ensure the 'Reply To Message' link only appears for inbound OP_RETURN message transactions.
- navigate to the Send page and ensure address/send value is empty and the OP_RETURN Message input field is closed by default.
- navigate between Settings->Send, eTokens->Send and Wallet->Send and ensure no state issues on the UI and the address, value fields are empty and the Message input field is closed by default.
- send a normal XEC tx with no message and ensure no regression.
- send a normal XEC tx with a message and ensure no regression.
- send a normal XEC tx with a 160 character message and ensure it's sent successfully.
- navigate back to the Transaction History tab and validate that clicking anywhere in the Tx box apart from the Reply To Message link still takes the user to the usual block explorer link.
- validate that clicking the Reply To Message link takes the user to the Send page where the correct address is prepopulated and the Message input field section is open by default. Ensure the message is sent successfully.
- send a message to the same sending address (send to self) and verify Reply To Message link is not displayed.
- use the ElectrumABC wallet to send an OP_RETURN message to this Cashtab wallet and ensure the Reply To Message link functions as above. Reply to that message and ensure it is displayed in Electrum wallet's tx Details dialog.
- verify cross browser compatibility in firefox and brave browsers.
- npm run extension.
- ensure same functionality and no UI issues in extension mode.
Reviewers: bytesofman, #bitcoin_abc
Reviewed By: bytesofman, #bitcoin_abc
Subscribers: bytesofman
Differential Revision: https://reviews.bitcoinabc.org/D10611