Page MenuHomePhabricator

[Cashtab] Add reply message function
ClosedPublic

Authored by emack on Dec 1 2021, 23:22.

Details

Reviewers
bytesofman
Group Reviewers
Restricted Project
Commits
rABC44296e16974e: [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.

Diff Detail

Repository
rABC Bitcoin ABC
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

emack requested review of this revision.Dec 1 2021, 23:22
bytesofman requested changes to this revision.Dec 1 2021, 23:49
bytesofman added inline comments.
web/cashtab/src/components/Wallet/Tx.js
412 ↗(On Diff #31223)

Add a check here to make sure data.replyAddress exists

Here's my user story for testing

  1. npm start
  2. I have OP_RETURN msgs already in my tx history, so Reply to message is displayed
  3. I click "Reply to message" but it takes to the send page with nothing populated
  4. I send myself a new OP_RETURN tx (which force refreshes the tx history)
  5. Now all of the "Reply to message" links work

Need to have some way to handle this edge case since unfortunately it will be common for users with messages in their wallet when we push the diff out.

This revision now requires changes to proceed.Dec 1 2021, 23:49

The Reply To Message link is now only rendered when data.replyAddress exists, which fixes the edge case of the link not passing the reply address for users with old OP_RETURN messages prior to this update. This also negates the need to force refresh the user's tx history.

This revision is now accepted and ready to land.Dec 2 2021, 18:43
This revision was automatically updated to reflect the committed changes.