Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update basic send flow #152

Open
wants to merge 12 commits into
base: gh-pages
Choose a base branch
from

Conversation

rabbitholiness
Copy link
Contributor

@rabbitholiness rabbitholiness commented Jan 24, 2025

This PR addresses the follow-up tasks for the basic send flow page that are mentioned in this issue.
More specifically, it:

  • Updates the Basic Send Flow page
  • Adds a page about the send form input fields, including fee selection. It covers the general approach to inline validation error handling and includes specific examples.

- Removed block status/setting bar from mobile screens
- Removed QR code scan buttons
- New clipboard detection pattern (inline button)
- Removed transaction sent modal
- Updated review screens (removed header text)
- Updated drag&drop styling
- Updated page content
- Added inline validation examples
@rabbitholiness rabbitholiness marked this pull request as ready for review January 28, 2025 18:11
@rabbitholiness
Copy link
Contributor Author

@GBKS I think this is ready for a first review.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please make a couple of tweaks:

  • Little bit of padding for "Send all"
  • Make the input field fill the available space so it can be easily tapped to focus.

Would also be nice to be able to tap the available balance in the error message, to "Send all". That might be what the user wants to do.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the label field is a fixed width, we may need to define that as well. That could get a little tricky across input fields, we the text size is dynamic and user-adjustable.

image = "/assets/images/send/layout-blocks-address.png"
retina = "/assets/images/send/layout-blocks-address@2x.png"
big = "/assets/images/send/layout-blocks-address-big.png"
alt-text = "Layout blocks of the address input component."
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe just throw the image into AI and have it create alt text?

@rabbitholiness
Copy link
Contributor Author

Addressed @GBKS's comments.

- Updated review screen to be a full page modal
- Added transaction confirmation screen
@GBKS
Copy link
Contributor

GBKS commented Feb 24, 2025

Awesome progress. Just a few more questions & nits:

  1. The offline banner is very aggressive visually. How about moving it inline, right above the buttons and making it more subtle? Instead of dead-ending users, could we tell them to go online, and give an option to save the transaction (as PSBT) until their next session?
  2. Can we remove the cancel button in the review screen? Does not seem to add anything.
  3. For the collapsed address, can we just tap it to expand it rather than having a tooltip? Could be just something we do without indication. Or maybe the three dots can be orange to indicate interaction?
  4. Address highlighting: The darker parts are too dark and don't have enough contrast. It should not look like placeholder text.
  5. “Send all” would be better worded as “Send max” (the maximum amount including fees). My main concern is that this takes a lot of prime real estate for not being something people do all the time. Maybe it could just be one of the dropdown options? Send max really does two things, it adds the balance as the amount and it enables that fees are in the amount.
  6. Insufficient balance error. We could also show "Send max" in here. "Your balance is XYZ. Send max."
  7. In the clipboard indicator, is “Paste” the right word? Maybe "Add" or "Insert". I'd also move the primary button to the right.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants